摘要
帮你速读文章内容
Vue3相比Vue2具有以下改进:可以没有根标签,减少内存使用;采用组合式API,使代码更有序;生命周期钩子函数有所变化;v-if和v-for的优先级不同;diff算法优化,减少不必要的节点比较;响应式原理通过Proxy实现,性能提升。Vue3还具有更快的渲染性能、更小的体积、更好的TypeScript支持和更灵活的组合式API。
摘要由作者通过智能技术生成
有用

一. 根节点不同

vue2中必须要有根标签。

vue3中可以没有根标签,会默认将多个根标签包裹在一个fragement虚拟标签中,有利于减少内存。

二. 组合式API和选项式API

在vue2中采用选项式API,将数据和函数集中起来处理,将功能点切割了当逻辑复杂的时候不利于代码阅读。

在vue3中采用组合式API,将同一个功能的代码集中起来处理,使得代码更加有序,有利于代码的书写和维护。

三. 生命周期的变化

  • 创建前:beforeCreate -> 使用setup()

  • 创建后:created -> 使用setup()

  • 挂载前:beforeMount -> onBeforeMount

  • 挂载后:mounted -> onMounted

  • 更新前:beforeUpdate -> onBeforeUpdate

  • 更新后:updated -> onUpdated

  • 销毁前:beforeDestroy -> onBeforeUnmount

  • 销毁后:destroyed -> onUnmounted

  • 异常捕获:errorCaptured -> onErrorCaptured

  • 被激活:onActivated 被包含在<keep-alive>中的组件,会多出两个生命周期钩子函数。被激活时执行。

  • 切换:onDeactivated 比如从 A 组件,切换到 B 组件,A 组件消失时执行

我们通常会用 onMounted 钩子在组件挂载后发送异步请求,获取数据并更新组件状态。

这是因为onMounted钩子在组件挂载到DOM后调用,而发送异步请求通常需要确保组件已经挂载,以便正确地操作DOM或者更新组件的状态。

四.v-if和v-for的优先级

在vue2中v-for的优先级高于v-if,可以放在一起使用,但是不建议这么做,会带来性能上的浪费

在vue3中v-if的优先级高于v-for,一起使用会报错。可以通过在外部添加一个标签,将v-for移到外层

五.diff算法不同

vue2中的diff算法

遍历每一个虚拟节点,进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方。用patch记录的消息去更新dom

缺点:比较每一个节点,而对于一些不参与更新的元素,进行比较是有点消耗性能的。特点:特别要提一下Vue的patch是即时的,并不是打包所有修改最后一起操作DOM,也就是在vue中边记录变更新。(React则是将更新放入队列后集中处理)。

vue3中的diff算法

在初始化的时候会给每一个虚拟节点添加一个patchFlags,是一种优化的标识。只会比较patchFlags发生变化的节点,进行识图更新。而对于patchFlags没有变化的元素作静态标记,在渲染的时候直接复用。

六. 响应式原理不同

vue2通过Object.definedProperty()的get()和set()来做数据劫持、结合和发布订阅者模式来实现,Object.definedProperty()会遍历每一个属性。

vue3通过proxy代理的方式实现。

proxy的优势:不需要像Object.definedProperty()的那样遍历每一个属性,有一定的性能提升proxy可以理解为在目标对象之前架设一层“拦截”,外界对该对象的访问都必须通过这一层拦截。这个拦截可以对外界的访问进行过滤和改写。

当属性过多的时候利用Object.definedProperty()要通过遍历的方式监听每一个属性。利用proxy则不需要遍历,会自动监听所有属性,有利于性能的提升

总结

更快的渲染性能:

  • Vue3 相比 Vue2 来说,Vue3 重写了虚拟 Dom 实现,编译模板的优化,更高效的组件初始化。

更小的体积:

  • Vue 3 的运行时核心相比 Vue 2 更小,这意味着更小的打包体积,减少了前端加载时间。

  • Tree-shaking 支持:Vue 3 代码更容易被 Tree-shaking 优化,因此可以更好地剔除不需要的代码。

更好的 TypeScript 支持:

  • Vue 3 的代码库已经全面采用 TypeScript 重写,提供了更好的类型推断和类型提示。

  • 提供了更多的内置类型声明,使得开发时更容易发现代码错误和调试。

更灵活的组合式 API:

  • Vue 3 引入了组合式 API,使得组件的逻辑可以更好地组织和复用。

  • 组合式 API 提供了更直观、更灵活的方式来组织组件代码,使得代码更易读、易维护。

更好的响应式系统:

  • Vue 3 使用了 Proxy 来重写响应式系统,相比 Vue 2 的 Object.defineProperty,更加直观和强大。

  • 在 Vue 3 中,可以在更深的层次上追踪响应式变量的变化,使得开发者能够更准确地监听数据变化。

关注小白,每天给你带来一片知识点
举报/反馈

木木夕小白

778获赞 213粉丝
网站与众不同,吸引用户眼球,技能不可或缺
关注
0
0
收藏
分享