阜蒙县自治区建设学校网站,汉中市住建局建设厅网站官网,网站建设管理工作总结报告,网站开发流程主要分成什么setup 是 Vue3 中的一个全新的配置项#xff0c;值为一个函数。
setup 是所有 Composition API#xff08;组合式API#xff09;的入口#xff0c;是 Vue3 语法的基础。
组件中所用到的数据、方法、计算属性等#xff0c;都需要配置在 setup 中。
setup 会在 beforeCre…setup 是 Vue3 中的一个全新的配置项值为一个函数。
setup 是所有 Composition API组合式API的入口是 Vue3 语法的基础。
组件中所用到的数据、方法、计算属性等都需要配置在 setup 中。
setup 会在 beforeCreate 之前执行一次this 是 undefined 。 Options API 与 Composition API 的概念
在 Vue2 中编写组件的方式就是 Options API 选项式API。
Options API 的特点就是在对应的配置项中编写对应的代码。比如在 data 中定义数据、在 methods 中定义方法、在 computed 中定义计算属性等等。
但是如果使用 Options API 的方式开发大型项目当一个组件的代码成千上百行时功能逻辑分布在各个配置项中就会显得非常零散不易阅读后期难以维护。
Composition API 的方式类似于原生 JS 可以将每个功能的代码都汇聚在一起这样会使代码的逻辑性、阅读性、维护性更强。而 Composition API 编写代码的位置就是 setup 配置项。 注Vue2 和 Vue3 的写法尽量不要混用如果有重名setup 配置的内容优先。 setup 的基础写法
templateh1个人信息/h1p姓名{{ name }}/pp年龄{{ age }}/p
/templatescript
export default {name: Home,setup() {// 定义数据这里只是测试一下 setup 暂不考虑响应式的问题。let name 张三;let age 18;// 返回数据setup 返回的数据可以直接在 template 中使用。return {name,age}}
}
/script
注setup 函数早于 beforeCreate 执行。也就是说 setup 函数在执行时Vue 实例还没有创建出来所以无法使用 this 。而 Vue 为了避免我们错误的使用直接将 setup 函数中的 this 修改成了 undefined 。 在 setup 中创建方法
templatebutton clickarrowsFun箭头函数格式/buttonbutton clicknameFun命名函数格式/buttonbutton clickomitFun匿名函数格式/button
/templatescript
export default {name: Home,setup() {// 方式一箭头函数格式const arrowsFun () {alert(箭头函数格式);}// 方式二命名函数格式function nameFun() {alert(命名函数格式);}// 方式三匿名函数格式const omitFun function () {alert(函数简写格式);}// 返回数据return {arrowsFun,nameFun,omitFun}}
}
/script
注setup 通常返回一个对象对象中的数据、方法、属性等都可以直接在 template 模板中使用。 setup 返回渲染函数【不推荐】
templatep我会被替换掉哦/p
/templatescript
import { h } from vue;
export default {name: Home,setup() {// 返回渲染函数return () h(h1, 新内容);}
}
/script 注setup 也可以返回一个渲染函数用于替换组件中所有的内容。 原创作者吴小糖
创作时间2023.11.8
