<script setup> 的作用

2023-12-25 22:03:30

一、使用<script setup> 之后,就不需要手动写以下代码,只要写逻辑代码

未加setup,vite 工程要加上下面代码

*export default{

? ?* ?setup(){

? ?* ?//只要写逻辑代码

? ?* ? ?return{***}

? ?* ?}

? ?* }

加了setup ,export default? 、setup() return{***} 不需要写了。vue做特殊编译处理

eg:

<script setup>
  /**
   * 单文件组件中使用组合式api:在顶部script标签元素上加上setup属性,vue做特殊编译处理
   * 使用<script setup> 之后,就不需要手动写以下代码,只要写逻辑代码
   * export default{
   *  setup(){
   *  //只要写逻辑代码
   *    return{***}
   *  }
   * }
   */
  //只要导入和逻辑代码
  import {reactive} from 'vue';
  const state = reactive({
    id:1,
    name:'小梦',
    salary:999
  })

  function add(){
    state.salary++;
  }
  //不需要return
</script>

<template>
  <div>
    {{ state.id }} === {{ state.name }} ==={{ state.salary }}
    <button @click="add">工资加1</button>
  </div>
</template>

<style scoped>

</style>

运行效果:

文章来源:https://blog.csdn.net/QWERTY55555/article/details/135208526
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。