Vue3-Setup-“集大成者”

何为Setup：

        setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API 行为的根基，组件中所用到的：数据、方法、计算属性、钩子、自定义方法、自定义插槽、自定义Ref、监视......等等，均配置在setup中。

        格式如下：（直观来看，仍然不像是组件式的，反倒像选项式的）

<script lang="ts">
  export default {
    name:'Person',
    setup(){
      // 数据，原来写在data中（注意：此时的name、age、tel数据都不是响应式数据）
      let name = '张三'
      let age = 18
      let tel = '13888888888'

      // 方法，原来写在methods中
      function changeName(){
        name = 'zhang-san' //注意：此时这么修改name页面是不变化的
        console.log(name)
      }
      function changeAge(){
        age += 1 //注意：此时这么修改age页面是不变化的
        console.log(age)
      }
      function showTel(){
        alert(tel)
      }

      // 返回一个对象，对象中的内容，模板中可以直接使用
      return {name,age,tel,changeName,changeAge,showTel}
    }
  }
</script>

Setup的特点：

1. setup函数返回的对象中的内容，可直接在模板中使用。

2. setup中访问this是undefined。

3. setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。

4. setup含有顶层async，在script中异步调用获得数据时可以只写await

setup 的返回值：

        

• 若返回一个对象：则对象中的：属性、方法等，在模板中均可以直接使用。

• 若返回一个函数：则可以自定义渲染内容，代码如下：

setup(){
  return ()=> '你好哇！'
}

setup 与 Options API 的关系：

• Vue2 的配置（data、methos......）中可以访问到 setup中的属性、方法。

• 但在setup中不能访问到Vue2的配置（data、methos......）。

• 如果与Vue2冲突，则setup优先。

setup 语法糖：

直接将setup写在script标签中

<script setup lang="ts">
  console.log(this) //undefined
  
  // 数据（注意：此时的name、age、tel都不是响应式数据）
  let name = '张三'
  let age = 18
  let tel = '13888888888'

  // 方法
  function changName(){
    name = '李四'//注意：此时这么修改name页面是不变化的
  }
  function changAge(){
    console.log(age)
    age += 1 //注意：此时这么修改age页面是不变化的
  }
  function showTel(){
    alert(tel)
  }
</script>

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

第一步：包管理器下载插件：npm i vite-plugin-vue-setup-extend -D

第二步：vite.config.ts配置下述代码：

import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
​
export default defineConfig({
  plugins: [ VueSetupExtend() ]
})

第三步：使用<script setup lang="ts" name="Person">