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

相关推荐
excel2 分钟前
理解 JavaScript 中的 for...in 与 for...of 的区别
前端
前端小巷子31 分钟前
Webpack 5模块联邦
前端·javascript·面试
玲小珑34 分钟前
Next.js 教程系列(十九)图像优化:next/image 与高级技巧
前端·next.js
晓得迷路了35 分钟前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆41 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆1 小时前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
pengzhuofan1 小时前
Web开发系列-第0章 Web介绍
前端
小鱼人爱编程1 小时前
Java基石--反射让你直捣黄龙
前端·spring boot·后端
JosieBook2 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug
LBJ辉2 小时前
2. Webpack 高级配置
前端·javascript·webpack