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),可以只打包需要的模块,减小包大小‌。

相关推荐
【ql君】qlexcel6 分钟前
Notepad++ 复制宏、编辑宏的方法
开发语言·javascript·notepad++··宏编辑·宏复制
MiyueFE6 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
啃火龙果的兔子10 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
「、皓子~38 分钟前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了40 分钟前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_42 分钟前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
奋飛1 小时前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
老A技术联盟1 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游1 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构