vue2 和 vue3的区别

1.生命周期不一样

|-----------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------|
| vue2 | vue3 |
| * beforeCreate * created * beforeMount * mounted * beforeUpdate * updated * beforeDestroy * Destroy | * onBeforeMount() * onMounted() * onBeforeUpdate() * onUpdated() * onBeforeUnmount() * onUnmounted() |

2.Composition组合式api

  • Vue2是选项API(Options API),一个逻辑会散乱在文件不同位置(data、props、computed、watch、生命周期钩子等),导致代码的可读性变差。当需要修改某个逻辑时,需要上下来回跳转文件位置。
  • Vue3组合式API(Composition API)则很好地解决了这个问题,可将同一逻辑的内容写到一起,增强了代码的可读性、内聚性,其还提供了较为完美的逻辑复用性方案。所有逻辑在setup函数中,使用 ref、watch 等函数组织代码。

3.vue2和vue3双向数据绑定原理发生了改变

vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。

vue3 中使用了 es6ProxyAPI 对数据代理。

4.根节点

  • Vue3 支持碎片(Fragments),就是说在组件可以拥有多个根节点。
  • vue2 只能存在一个根节点,需要用一个div来包裹

5.建立数据 data / setup函数

  • Vue2 这里把数据放入data属性中
  • Vue3 setup函数声明,返回模板需要数据与函数。

6.性能和速度

Vue 3 ‌:重新编写了虚拟DOM的实现,优化了编译模板,组件初始化和更新性能提高了1.3到2倍,服务器端渲染(SSR)速度提高了2到3倍。此外,Vue 3支持树摇(Tree Shaking),可以只打包需要的模块,减小包大小‌。

相关推荐
小牛itbull18 分钟前
ReactPress:深入解析技术方案设计与源码
javascript·react.js·reactpress
alexbai!18 分钟前
el-date-picker picker-options属性中disabledDate设置时间的禁用和启用,并且支持到时分秒的禁用和启用
javascript·vue.js·elementui
秃头女孩y26 分钟前
【React】条件渲染——逻辑与&&运算符
前端·react.js·前端框架
学无止境鸭1 小时前
vue读取本地excel文件并渲染到列表页面
前端·javascript·vue.js
不cong明的亚子1 小时前
在vue中,完成@wangeditor/editor组件的大数据量加载,解决卡顿
前端·vue.js
原机小子1 小时前
Spring Boot编程训练系统:前端与后端集成
前端·spring boot·后端
小满zs1 小时前
React第十五章(useEffect)
前端·react.js
爱米的前端小笔记1 小时前
前端学习八股资料CSS(一)
前端·css·经验分享·学习·职场和发展
ClinEvol1 小时前
JAVA后端生成图片滑块验证码 springboot+js完整案例
java·javascript·spring boot·滑块验证码
姚家湾1 小时前
由播客转向个人定制的音频频道(1)平台搭建
javascript·ai·hls·ardunio·播客