做文案选图片素材的网站,昆明网站建设方案策划,定制网站建设服务平台,南宁网站制作公司#x1f497;#x1f497;#x1f497;欢迎来到我的博客#xff0c;你将找到有关如何使用技术解决问题的文章#xff0c;也会找到某个技术的学习路线。无论你是何种职业#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章#xff0c;也欢… 欢迎来到我的博客你将找到有关如何使用技术解决问题的文章也会找到某个技术的学习路线。无论你是何种职业我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。谢谢你的光临让我们一起踏上这个知识之旅 文章目录 OptionsAPI 与 CompositionAPI对比 介绍setup 的返回值Setup语法糖完整代码如下 总结 OptionsAPI 与 CompositionAPI
Options API
Options API 是 Vue.js 2.x 中使用的传统组件设计模式。它基于选项对象将组件的数据、计算属性、方法、生命周期钩子等功能按照选项的形式进行组织。Options API 的特点包括
易于上手Options API 的结构清晰容易理解和学习适合初学者入门。
逻辑分离不同功能的代码被分离到不同的选项中使得代码更易维护和阅读。
依赖注入通过 this 上下文可以方便地访问到组件的属性和方法。Composition API
Composition API 是 Vue.js 3.x 中引入的新特性旨在解决 Options API 在复杂组件中难以维护的问题。Composition API 允许将组件的逻辑按照功能相关性进行组织而不是按照选项分散组织。Composition API 的特点包括
逻辑复用可以将逻辑抽取为可复用的函数更方便地在不同组件之间共享逻辑。
代码组织将相关逻辑放在一起使得组件更加清晰和易于维护。
更好的类型推断由于函数可以提供更多信息TypeScript 在使用 Composition API 时能够提供更好的类型推断。对比
Options类型的 API数据、方法、计算属性等集中在data、methods、computed中的若想改动一个需求就需要分别修改data、methods、computed不便于维护和复用。
Composition 可以用函数的方式更加优雅的组织代码让相关功能的代码更加有序的组织在一起。 上面我将两种形式的API都列出来了总的来说OptionsAPI属于Vue2CompositionAPI属于Vue3本文主要结合两者进行介绍 介绍
在 Vue3 中setup 函数是一个新引入的概念它代替了之前版本中的 data、computed、methods 等选项用于设置组件的初始状态和逻辑。setup 函数的引入使得组件的逻辑更加清晰和灵活本文将主要介绍Setup的基本用法和少量原理 更灵活的组织逻辑setup 函数可以将相关逻辑按照功能进行组织使得组件更加清晰和易于维护。不再受到 Options API 中选项的限制可以更自由地组织代码。 逻辑复用可以将逻辑抽取为可复用的函数并在 setup 函数中进行调用实现逻辑的复用避免了在 Options API 中通过 mixins 或混入对象实现逻辑复用时可能出现的问题。 更好的类型推断由于 setup 函数本身是一个普通的 JavaScript 函数可以更好地与 TypeScript 配合提供更好的类型推断和代码提示。 更好的响应式处理setup 函数中可以使用 ref、reactive 等函数创建响应式数据可以更方便地处理组件的状态实现数据的动态更新。 更细粒度的生命周期钩子setup 函数中可以使用 onMounted、onUpdated、onUnmounted 等函数注册组件的生命周期钩子可以更细粒度地控制组件的生命周期行为。 更好的代码组织setup 函数将组件的逻辑集中在一个地方使得代码更易读、易维护并且可以更清晰地看到组件的整体逻辑。
上述特点有些暂时用不到本节主要介绍下面三个特点
setup函数返回的对象中的内容可直接在模板中使用。setup中访问this是undefined。setup函数会在beforeCreate之前调用它是“领先”所有钩子执行的。 从下面的图就可以看出Setup的执行要更优先以及this的不适用
templatediv classpersonh2姓名{{name}}/h2h2年龄{{age}}/h2button clickchangeName修改名字/buttonbutton clickchangeAge修改年龄/buttonbutton clickshowTel查看联系方式/button/div/templatescript langtsexport default {name:Person,setup(){console.log(~,this) let name 花卷 //非响应式let age 22 //非响应式let tel 12435143545 //非响应式// 方法function changeName() {name 馒头 console.log(name) }function changeAge() {age 1 console.log(age) }function showTel() {alert(tel)}// 将数据、方法交出去return {name,age,tel,changeName,changeAge,showTel}}}/scriptsetup 的返回值
若返回一个对象则对象中的属性、方法等在模板中均可以直接使用**重点关注。** 若返回一个函数则可以自定义渲染内容代码如下
setup(){return () 你好啊
}Setup语法糖
大家十分清楚语法糖到哪都是为了使代码更简便
接下来我介绍一下语法糖的写法
script setup
/script它可以自动返回无需return返回我们测试一下首先在模版把a写上 然后再script里面写这里的let a 111就自带返回了我们接下来看看页面
script setuplet a 111
/script很不幸报错了我们读一下报错内容两个标签必须采用相同类型那么我们统一就好
script langts setuplet a 111
/script这样结果就出来了
我们如果想要修改下面的名字除了重命名文件大部分情况不采用可以采用一个插件 我们可以借助vite中的插件简化
第一步控制台运行npm i vite-plugin-vue-setup-extend -D第二步vite.config.ts
完整代码如下
templatediv classpersonh2姓名{{name}}/h2h2年龄{{age}}/h2h2地址{{address}}/h2button clickchangeName修改名字/buttonbutton clickchangeAge修改年龄/buttonbutton clickshowTel查看联系方式/button/div
/templatescript langts setup namePerson //自定义命名// 此时的name、age、tel都不是响应式的数据let name 张三let age 22let tel 1424423451let address 北京市朝阳区// 方法function changeName() {name console.log(name) }function changeAge() {age 1 console.log(age)}function showTel() {alert(tel)}
/script总结 一开始介绍了Vue2,3对应的两种API以及对比之后简单介绍了一下Vue3特有的函数—Setup最后围绕Setup介绍使用语法糖后可以省略 export default 和 setup 属性使得组件的代码更加简洁和易读。同时Vue 3 也会将 参数地注入到 setup 函数中使得在使用这些参数时不需要显式地声明。 挑战与创造都是很痛苦的但是很充实。
