setup

一句总结：setup是Vue3中一个新的配置项，值是一个函数，组件所用到的数据，方法，计算属性，监视，生命周期等等，都配置在setup中。 setup里面没有this

基本语法

<script lang="ts">
export default {
  setup() {
    // 数据
    let name = '张三'
    let age = 18
    // 方法
    function change() {
    }
    return {
      name,
      age,
      change
    }
  }
};
</script>

setup需要把值交出去。

setup的执行时机

setup在beforCreate之前执行

setup的返回值

上面的例子，setup的返回值是对象。

返回一个函数

setup() {
    let name = '张三'
    let age = 18
    return function() {
      return '返回一个函数'
    }
}

这时页面上面就会渲染函数的返回值

setup与OptionsAPI

optionsAPI里面是可以读取到setup里面的数据，因为setup比data执行要早。

<script lang="ts">
export default {
  beforeMount() {
    console.log('beforeCreate');
  },
  data() {
    return {
      copyName: this.name
    }
  },
  setup() {
    let name = '张三'
    let age = 18
    return {
      name,
      age
    }
  }
};
</script>

setup语法糖

<script lang="ts" setup>
  let name = "张三";
  let age = 18;
</script>

使用插件，在script标签上面添加name

使用setup语法糖需要借助 vite-plugin-vue-setup-extend插件在script标签上面添加name

1. npm i vite-plugin-vue-setup-extend -D
2. 配置

// vite.config.ts
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ViteSetupExtend from 'vite-plugin-vue-setup-extend'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    ViteSetupExtend()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

3. 使用

<script lang="ts" setup name="Person">
  import { onBeforeMount } from "vue";

  onBeforeMount(() => {
    console.log("onBeforeMount");
  });
  let name = "张三";
  let age = 18;
</script>