英国做网站的人,肥西建设局官方网站,湖州小程序开发,镇江网站制作价格日期#xff1a;2024年5月30日 作者#xff1a;Commas 签名#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释#xff1a;如果您觉得有所帮助#xff0c;帮忙点个赞#xff0c;也可以关注我#xff0c;我们一起成长#xff1b;如果有不对的地方#xf… 日期2024年5月30日 作者Commas 签名(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释如果您觉得有所帮助帮忙点个赞也可以关注我我们一起成长如果有不对的地方还望各位大佬不吝赐教谢谢^ - ^ 1.01365 37.78340.99365 0.0255 1.02365 1377.40830.98365 0.0006 文章目录 一、前言二、 选项式Options API2-1示例2-2选项式的优点2-3选项式的缺点 三、 组合式Composition API3-1示例3-1-1组合式 setup()函数式3-1-2组合式 setup语法糖式 3-2组合式的优点3-3组合式的缺点 四、总结 一、前言
Vue3当前前端开发的热门框架为开发者带来了两种组件编写方式选项式API 和 组合式API。这些不同的编写方式源于 Vue 的演进却也带来了困惑尤其是对新手来说。本文的目标是澄清这些混淆详细解释两种 API 的关联、差异以及它们各自的适用场景和优势。
二、 选项式Options API
选项式API是Vue2中广为人知的方式它通过预定义的选项如data、methods、computed等来组织代码。每个选项负责组件的不同方面这样可以让代码结构清晰易于理解和维护。
2-1示例
templatedivbutton clickincrementIncrement/buttonpCount: {{ count }}/p/div
/templatescript
export default {data() {return {count: 0};},methods: {increment() {this.count;}}
};
/script
解析与说明
template 这是Vue模板的部分它定义了组件的HTML结构。在这个例子中我们有一个按钮和一个段落p标签按钮用来增加计数段落用来显示当前计数。script 这是Vue组件的脚本部分它使用JavaScript编写。在这个例子中我们导出了一个默认的Vue组件对象。export default {...} 这是使用Vue 3的export default语法来定义一个组件。在这个对象中我们定义了组件的属性和方法。data() {...} data函数返回一个对象这个对象包含了组件的响应式数据。在这个例子中我们定义了一个名为count的属性它的初始值是0。methods: {...} methods对象包含了组件的方法。在这个例子中我们定义了一个名为increment的方法当按钮被点击时它会增加count的值。click指令 这是Vue的一个自定义指令用来绑定事件监听器。在这个例子中当按钮被点击时increment方法会被调用。{{ count }} 这些是Vue的插值表达式它们用来将数据绑定到模板字符串中。当count属性改变时插值表达式所在的位置也会相应更新。
2-2选项式的优点
易于理解和上手对于新手来说选项式API的结构更加直观容易理解。代码组织结构清晰不同的选项负责不同的功能使得代码结构清晰易于阅读和维护。兼容性对于Vue2迁移到Vue3的项目可以更方便地逐步迁移。
2-3选项式的缺点
逻辑分散同一个功能逻辑可能会分散在不同的选项中导致代码分散不易维护。代码冗余对于有多个组件共享相同逻辑的情况需要重复编写相同的代码导致代码冗余。类型支持不友好对于TypeScript用户来说选项式API的类型支持不如组合式API。
三、 组合式Composition API
组合式API是Vue3引入的一种新的编写方式它通过setup函数将组件的逻辑组织在一起。这样可以将相关的逻辑放在一起避免了选项式API中的逻辑分散问题。
3-1示例
组合式分两种
1、组合式 setup()函数式 2、组合式 setup语法糖式即 script setup模式 。
3-1-1组合式 setup()函数式
templatedivbutton clickincrementIncrement/buttonpCount: {{ count }}/p/div
/template
script
import { ref, onMounted } from vue;
export default {setup() {// 使用ref函数创建一个响应式引用相当于Vue 2中的data属性const count ref(0);// 使用一个方法来更新count的值function increment() {count.value;}// 使用onMounted生命周期钩子来处理组件挂载后的逻辑onMounted(() {console.log(Component is mounted!);});// 返回在模板中需要使用的数据和方法return {count,increment};}
};
/script解析与说明
import { ref, onMounted } from vue 这行代码从Vue 3的vue包中导入了ref和onMounted两个函数。ref用于创建响应式引用onMounted是一个生命周期钩子它在组件挂载后执行。export default {...} 仍然使用export default来定义组件。setup()函数 这是Vue 3中引入的新函数它是组合式API的入口。在setup()函数中你可以定义响应式变量、计算属性、侦听器等。const count ref(0) 使用ref函数创建了一个响应式引用它相当于Vue 2中的data属性。count现在是响应式的当它在组件内部改变时界面上的插值表达式会自动更新。function increment() {...} 定义了一个方法来更新count的值。onMounted(() {...}) 使用onMounted生命周期钩子来处理组件挂载后的逻辑例如在控制台打印消息。返回对象 setup()函数返回一个对象其中包含了在模板中需要使用的数据和方法。这些数据和方法可以通过this在模板中访问但在setup()函数内部你不需要使用this来引用它们。
3-1-2组合式 setup语法糖式
templatedivbutton clickincrementIncrement/buttonpCount: {{ count }}/p/div
/template
script setup
import { ref, onMounted } from vue;
// 响应式变量
const count ref(0);
// 方法
function increment() {count.value;
}
// 生命周期钩子
onMounted(() {console.log(Component is mounted!);
});
/script解析与说明
script setup标签 这是Vue 3引入的新标签用于定义组合式API的脚本部分。在这个标签内部你可以使用import、const、function等JavaScript语法来定义组件的响应式状态和方法。import { ref, onMounted } from vue 这行代码从Vue 3的vue包中导入了ref和onMounted两个函数。const count ref(0) 使用ref函数创建了一个响应式引用相当于选项式API中的data属性。function increment() {...} 定义了一个方法来更新count的值。onMounted(() {...}) 使用onMounted生命周期钩子来处理组件挂载后的逻辑。返回对象 在script setup模式中你不需要显式返回响应式数据和方法因为它们可以直接在模板中使用。
3-2组合式的优点
逻辑集中通过setup函数可以将组件的所有逻辑放在一起使得代码更加集中易于维护。更好的类型支持对于TypeScript用户来说组合式API提供了更好的类型支持。代码复用通过自定义函数或钩子可以方便地实现代码复用。
3-3组合式的缺点
学习成本对于新手来说组合式API可能需要一定的时间来适应。重构成本对于已有的项目如果采用选项式API那么重构为组合式API可能需要一定的成本。
四、总结
Vue3的选项式API和组合式API各有优缺点开发者可以根据自己的需求选择合适的方式。
对于新手或小型项目选项式API可能更适合而对于大型项目或需要更好的类型支持的项目组合式API可能是更好的选择。同时组合式API的两种写法也为我们提供了更多的选择可以根据项目需求灵活运用。
在未来的发展趋势中组合式API可能会越来越受到开发者的青睐因为它提供了更高的灵活性和更好的类型支持。但无论如何Vue3为我们提供了两种方式让我们可以根据项目需求灵活选择这也是Vue3如此受欢迎的原因之一。 参考文章
Vue.js 版权声明本文为博主原创文章如需转载请给出 原文链接https://blog.csdn.net/qq_35844043/article/details/139321504
