Vue 2 | Vue 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 协调时需要遍历的节点数量。模板中任何的静态部分都会被高效地略过。 |
Vue 2 和 Vue 3 的区别
于 2024-03-29 17:42:06 首次发布
本文探讨了Vue2和Vue3中选项式API与组合式API的差异,涉及生命周期管理、setup()钩子、响应式系统、v-if与v-for的优先级以及虚拟DOM的高效渲染策略。
摘要由CSDN通过智能技术生成