拉开序幕的 setup

概述

setup是Vue3中一个新的配置项, 值是一个函数, 它是Composition API的表演舞台

组件中所用到的: 数据、方法、计算属性、监视等, 均配置在setup中

特点:

• setup函数返回的对象中的内容, 可直接在模板中使用
• setup中访问this是undefined
• setup函数会在beforeCreate之前调用, 它是领先所有钩子执行的

返回值

• 返回对象: 对象中的属性、方法等, 在模板中均可以直接使用

<template>
  <div class="person">
    <h2>姓名: {{ name }}</h2>
    <button @click="changeName">修改姓名</button>
  </div>
</template>

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

      // 方法, 原来写在 methods 中
      function changeName(){
        name = 'Zhang San' //注意: 此时修改 name 页面是不变化的
        console.log(name)
      }

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

• 返回函数: 可以自定义渲染内容

setup(){
  return () => 'Halo'
}

setup 与 Options API 的关系

• 在Vue2的配置(如data, methos...)中可以访问到setup中的属性、方法
• 在setup中不能访问到Vue2的配置(如data, methos...)
• 如果与Vue2冲突, 则setup优先

setup 语法糖

setup函数的语法糖可以把setup独立出去

• 代码示例

<template>
  <div class="person">
    <h2>姓名: {{ name }}</h2>
    <button @click="changeName">修改姓名</button>
  </div>
</template>

<script lang="ts">
  export default {
    name:'Person'
  }
</script>

<script lang="ts" setup>
  console.log(this) // undefined

  // 数据, 原来写在 data 中, 注意: 此时的 name 不是响应式数据
  let name = '张三'

  // 方法, 原来写在 methods 中
  function changeName(){
    name = 'Zhang San' //注意: 此时修改 name 页面是不变化的
    console.log(name)
  }
</script>

扩展

上述代码中需要单独写一个不带setup属性的script标签来指定组件的名字, 比较麻烦, 可以借助vite中的插件优化

• 第一步: 安装vite-plugin-vue-setup-extend插件

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标签中指定名字即可

<script setup lang="ts" name="Person">
  // ...
</script>