Vue3---(2)setup

概述

Vue 3 引入了 setup 语法，使 Composition API 成为核心特性之一。它相比 Options API 提供了更清晰的逻辑组织，提高了代码可维护性。组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。

基本语法

传统 `setup`

xml 复制代码

<script lang="ts">
  export default {
    name:'Test',
    setup(){
      // 数据(vue2 写在data中)
      let name = '张三'
      let age = 18
      // 方法(vue2 写在method中)
      function test(){
        name = 'zhang-san' //注意：此时这么修改name页面是不变化的
        console.log(name)
      }
      // 返回一个对象，对象中的内容，模板中可以直接使用
      return {name,age,test}
    }
  }
</script>

注意:setup返回值如果返回一个对象,那么对象的属性方法都可以在模板中使用,但是如果返回一个函数,则可以自定义渲染内容

javascript 复制代码

setup(){
 return ()=>'自定义文字显示'
}

`<script setup>`

不需要 return，变量和方法会自动暴露给 template

xml 复制代码

<script setup lang="ts">

  // 数据
  let name = '张三'
  let age = 18
  // 方法
  function test(){
  }
</script>

扩展：上述代码，还需要编写一个不写setup的script标签，去指定组件名字，比较麻烦，我们可以借助vite中的插件简化

npm i vite-plugin-vue-setup-extend -D
vite.config.ts中使用插件
<script setup lang="ts" name="Person">

javascript 复制代码

import { defineConfig } from 'vite'
import VueSetupName from 'vite-plugin-vue-setup-extend'

export default defineConfig({
  plugins: [ VueSetupName () ]
})

执行时机

在 beforeCreate 之前执行
不能访问 this （因为 this 还未初始化,this输出为undefined）
只能在 <script setup> 或 setup() 中使用

重点

可与vue2中的data,method,computed 等混用,而且在data,method...中也可以访问到setup中的属性和方法(因为setup先执行,数据方法都挂载到vm上,可以通过this访问到)
setup不能访问vue2中的配置(data,method),原因在于setup先执行,此时this还是undefined

概述

基本语法

传统 setup

<script setup>

执行时机

重点

传统 `setup`

`<script setup>`