vue setup与OptionsAPI

setup 是 vue3 中一个新的配置项，值是一个函数，组件中所用到的：数据、方法、计算属性、监视等等，全配置再setUp中。

特点如下：

• 生命周期优先级

setup 函数在 beforeCreate 钩子之前自动调用，优先于所有生命周期钩子执行 。 ‌

• 作用域限制

在 setup 函数中无法使用组件实例（即this），但可通过 getCurrentInstance 获取组件实例 。 ‌setup 函数中的 this 是 undefined，vue3 中已经弱化 this 了。

• 数据暴露机制

setup返回的对象中的数据和方法可直接在模板中使用，未返回的内容无法访问 。 ‌

• 参数传递

setup 的第一个参数用于接收父组件传递的 props，支持响应式解构 。 ‌

• 性能优化

由于在组件实例创建前执行，适合进行异步加载或延迟初始化操作 。 ‌

• 类型支持

TypeScript 中 setup 函数的返回值能提供更精确的类型推断，提升开发体验 。 ‌

• 逻辑复用

支持将逻辑拆分为独立函数并组合使用，增强代码复用性和可维护性 。

<script  >
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello World!');
    function changeMessage() {
      message.value = 'AAAAA!';
    }
    
    return {
      message,changeMessage
    };
  }
};

</script>

<template>
  <div id="app">{{ message }}</div>
  <button @click="changeMessage">Click me</button>
</template>

<style scoped></style>

setup 的返回值

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

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

  setup() {
  return ()=>"Hello vue!"
  }

setup和Options API的关系

• Vue2 的配置（data、methos......）中可以访问到 setup中的属性、方法。
• 但在setup中不能访问到Vue2的配置（data、methos......）。
• 如果与Vue2冲突，则setup优先。

setup语法糖

setup 函数有一个语法糖，这个语法糖，可以让我们把 setup 独立出去，代码如下：

<script setup lang="ts" >
import { ref } from 'vue';

const message = ref('Hello World!');
function changeMessage() {
  message.value = 'BBB!';
}

</script>

<template>
  <div id="app">{{ message }}</div>
  <button @click="changeMessage">Click me</button>
</template>

<style scoped></style>

扩展：上述代码，你需要确保已经安装了 vite-plugin-vue-setup-extend 插件。如果还没有安装，可以通过 npm 或 yarn 来安装它。

• 安装插件

  npm install vite-plugin-vue-setup-extend --save-dev

  或者

  yarn add vite-plugin-vue-setup-extend -D

• 修改Vite配置文件：在vite.config.js 或 vite.config.ts 文件中，你需要引入并配置该插件。

  import { defineConfig } from 'vite'
  import vueDevTools from 'vite-plugin-vue-devtools'

  // https://vite.dev/config/
  export default defineConfig({
  plugins: [
  vue(),
  vueDevTools(),
  ]
  })

  <script setup lang="ts">