vue2 和 vue3的区别
1.生命周期不一样
vue2 | vue3 |
|
|
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 中使用了 es6 的 Proxy
API 对数据代理。
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),可以只打包需要的模块,减小包大小。