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

相关推荐
sky_feiyu4 分钟前
前端HTML
前端·html
随·枫10 分钟前
html渲染优先级
前端·html
码蜂窝编程官方16 分钟前
【含开题报告+文档+PPT+源码】基于SSM的电影数据挖掘与分析可视化系统设计与实现
java·vue.js·人工智能·后端·spring·数据挖掘·maven
小扳1 小时前
Web 毕设篇-适合小白、初级入门练手的 Spring Boot Web 毕业设计项目:电影院后台管理系统(前后端源码 + 数据库 sql 脚本)
java·前端·数据库·spring boot·mysql·spring·课程设计
田本初1 小时前
从0-1逐步搭建一个前端脚手架工具并发布到npm
前端·npm·node.js
Marshall35721 小时前
Canvas 和 SVG 的高级使用与性能优化
前端·svg·canvas
chusheng18402 小时前
Java基于SpringBoot+Vue的藏区特产销售平台
java·vue.js·spring boot·藏区特产销售平台·特产销售平台
Java学长-kirito2 小时前
springboot/ssm网购平台管理系统Java在线购物商城管理平台web电商源码
java·前端·spring boot
夫琅禾费米线2 小时前
JavaScript 中的 Generator 函数及其方法
开发语言·前端·javascript
Traced back2 小时前
pinia的使用
前端