最好看免费观看高清大全电影网站,引流推广平台有哪些,网络营销设计公司,抓取网站访客数据原理学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes
觉得有帮助的同学#xff0c;可以点心心支持一下哈#xff08;笔记是根据b站上学习的尚硅谷的前端视频【张天禹老师】#xff0c;记录一下学习笔记#xff0c;用于自己复盘#xff0c;有需要学…学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes
觉得有帮助的同学可以点心心支持一下哈笔记是根据b站上学习的尚硅谷的前端视频【张天禹老师】记录一下学习笔记用于自己复盘有需要学习的可以去b站学习原版视频
一、【OptionsAPI 与 CompositionAPI】
Vue2的API设计是Options配置风格的。Vue3的API设计是Composition组合风格的。
Options API 的弊端
Options类型的 API数据、方法、计算属性等是分散在data、methods、computed中的若想新增或者修改一个需求就需要分别修改data、methods、computed不便于维护和复用。 Composition API 的优势
可以用函数的方式更加优雅的组织代码让相关功能的代码更加有序的组织在一起。 说明以上四张动图原创作者大帅老猿
二、【拉开序幕的 setup】
setup 概述
setup是Vue3中一个新的配置项值是一个函数它是 Composition API“表演的舞台”组件中所用到的数据、方法、计算属性、监视......等等均配置在setup中。
特点如下
setup函数返回的对象中的内容可直接在模板中使用。setup中访问this是undefinedvue3已经开始弱化thissetup函数会在beforeCreate之前调用它是“领先”所有钩子执行的。
vue3\hello_vue3\src\components\Person.vue
templatediv classpersonh2姓名{{name}}/h2h2年龄{{age}}/h2button clickchangeName修改名字/buttonbutton clickchangeAge年龄1/buttonbutton clickshowTel点我查看联系方式/button/div
/templatescript langtsexport default {name:Person,setup(){// 数据原来写在data中注意此时的name、age、tel数据都不是响应式数据let name 张三let age 18let tel 13888888888// 方法原来写在methods中function changeName(){name zhang-san //注意此时这么修改name页面是不变化的console.log(name)}function changeAge(){age 1 //注意此时这么修改age页面是不变化的console.log(age)}function showTel(){alert(tel)}// 返回一个对象对象中的内容模板中可以直接使用return {name,age,tel,changeName,changeAge,showTel}}}
/script setup 的返回值
若返回一个对象则对象中的属性、方法等在模板中均可以直接使用重点关注。若返回一个函数则可以自定义渲染内容代码如下
setup(){return () 你好啊
} setup 与 Options API 的关系面试可能会用
Vue2 的配置data、methos......中可以访问到setup中的属性、方法。但在setup中不能访问到Vue2的配置data、methos......。如果与Vue2冲突则setup优先。
setup 语法糖
setup函数有一个语法糖这个语法糖可以让我们把setup独立出去代码如下
templatediv classpersonh2姓名{{name}}/h2h2年龄{{age}}/h2button clickchangName修改名字/buttonbutton clickchangAge年龄1/buttonbutton clickshowTel点我查看联系方式/button/div
/templatescript langtsexport default {name:Person,}
/script!-- 下面的写法是setup语法糖 --
script setup langtsconsole.log(this) //undefined// 数据注意此时的name、age、tel都不是响应式数据let name 张三let age 18let tel 13888888888// 方法function changName(){name 李四//注意此时这么修改name页面是不变化的}function changAge(){console.log(age)age 1 //注意此时这么修改age页面是不变化的}function showTel(){alert(tel)}
/script
扩展上述代码还需要编写一个不写setup的script标签去指定组件名字比较麻烦我们可以借助vite中的插件简化
第一步npm i vite-plugin-vue-setup-extend -D第二步vite.config.ts import { defineConfig } from vite
import VueSetupExtend from vite-plugin-vue-setup-extendexport default defineConfig({plugins: [ VueSetupExtend() ]
}) 3.第三步script setup langts namePerson
