[Vue3核心语法] setup语法糖

一、setup 概述

setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API "表演的舞台 " ，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。

特点：

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

• setup中访问this是undefined。 不要用this了

• setup函数会在beforeCreate之前调用，它是"领先"所有钩子执行的。

注意：

• vue3可以跟vue2共存，vue2可以获取vue3的数据，反之不行 尽量不要两者都用

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

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

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

二、setup 语法糖

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

<!-- 下面的写法是setup语法糖 -->
<script setup lang="ts" name="Person">
  console.log(this) //undefined
</script>

含义：

1. <script setup>

在 Vue 3 中，使用 <script setup> 语法可以更加简洁和高效地定义组件，特别是在使用 TypeScript 时。

• 简化组件的定义 ：<script setup> 是 Vue 3.2 及以上版本引入的一个新的 <script> 语法。它允许你在组件中更简洁地使用组合式 API。与传统的 setup() 函数不同，使用 <script setup> 时，不需要显式返回你想要在模板中使用的变量或函数。

• 自动导入 ：在 <script setup> 中，一些 Vue 的常用 API（如 ref、computed 等）会被自动引入，因此不需要手动导入。

2. lang="ts"

• TypeScript 支持 ：通过设置 lang="ts"，你告诉 Vue 这个脚本使用 TypeScript。这样你可以在组件中使用 TypeScript 的类型系统，包括类型注解、接口、类型推断等，增强代码的可读性和可维护性。

3. name="Person"

• 组件名称 ：在 <script setup> 中指定 name 属性为组件的名称。在这个例子中，name="Person" 指定了该组件的名称为 Person。虽然在大多数情况下，组件名称通常在导入时就已经定义，但显式指定 name 属性可以在调试时更容易地识别组件，尤其是在使用 Vue DevTools 时。