印刷东莞网站建设技术支持,asp网站 打开,企业汽车网站建设,行业网站网址一、setup 概述
setup是Vue3中一个新的配置项#xff0c;值是一个函数#xff0c;它是 Composition API “表演的舞台”#xff0c;组件中所用到的#xff1a;数据、方法、计算属性、监视......等等#xff0c;均配置在setup中。
特点#xff1a; 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 langts namePersonconsole.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. langts
TypeScript 支持通过设置 langts你告诉 Vue 这个脚本使用 TypeScript。这样你可以在组件中使用 TypeScript 的类型系统包括类型注解、接口、类型推断等增强代码的可读性和可维护性。
3. namePerson
组件名称在 script setup 中指定 name 属性为组件的名称。在这个例子中namePerson 指定了该组件的名称为 Person。虽然在大多数情况下组件名称通常在导入时就已经定义但显式指定 name 属性可以在调试时更容易地识别组件尤其是在使用 Vue DevTools 时。
