Vue 2 和 Vue 3 的区别

本文探讨了Vue2和Vue3中选项式API与组合式API的差异,涉及生命周期管理、setup()钩子、响应式系统、v-if与v-for的优先级以及虚拟DOM的高效渲染策略。
摘要由CSDN通过智能技术生成

Vue 2Vue 3
API风格选项式API组件可以按两种不同的风格书写:选项式 API 和组合式 API。

生命周期

beforeDestroy,destroyed

beforeUnmount,unmounted

组合式 API的生命周期钩子都是带前缀on,选项式 API 的生命周期选项和Vue 2基本相同,除了销毁/卸载的两个选项。setup() 钩子是在组件中使用组合式 API 的入口。组合式 API 中的 setup() 钩子会在所有选项式 API 钩子之前调用。

响应性使用 getter / setter使用了 Proxy 来创建响应式对象,仅将 getter / setter 用于 ref。
v-if与v-for一起使用时的优先级v-for 具有比 v-if 更高的优先级当它们同时存在于一个节点上时,v-if 比 v-for 的优先级更高。
单个根元素

每个组件必须只有一个根元素

包含多个根节点的模板被表示为一个片段 (fragment)
渲染机制需要遍历整棵树、比较每个 vnode 上 props 的区别编译器通过静态提升,在重新渲染时不会再次创建和比对静态元素;通过更新类型标记,Vue 能够在更新带有动态绑定的元素时做最少的操作;树结构打平大大减少了我们在虚拟 DOM 协调时需要遍历的节点数量。模板中任何的静态部分都会被高效地略过。
  • 7
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue2和Vue3之间有一些重要的区别。首先,Vue3的脚手架命令式可视化创建脚手架更加方便。其次,Vue3引入了Composition API,允许开发者更灵活地组织和重用代码。相比之下,Vue2使用的是选项式API。第三,数据监听方面,Vue2使用的是watch和computed来实现数据监听,而Vue3引入了watchEffect和computed来实现更高效的数据监听。此外,双向绑定方面,Vue2使用Object.defineProperty,而Vue3使用了更先进的Proxy API。另外,Vue3还支持碎片(Fragments),即可以拥有多个根节点。总之,Vue3相比Vue2在性能、轻量化、协作等方面都有所优化,同时引入了更多的新特性和语法糖,提供了更好的开发体验和维护成本。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue2和vue3的区别(由浅入深)](https://blog.csdn.net/weixin_42974827/article/details/126560362)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [vue2和vue3区别](https://blog.csdn.net/weixin_54722719/article/details/123069837)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值