当前位置: 首页 > news >正文

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 中使用了 es6 的 ProxyAPI 对数据代理。

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


http://www.mrgr.cn/news/69285.html

相关文章:

  • C/C++语言基础--initializer_list表达式、tuple元组、pair对组简介
  • mysql时间时区修改、set global、配置文件-default-time-zone
  • 前端web
  • LeetCode 491-非递减子序列
  • 数据库对象映射
  • 使用 PyTorch 实现 AlexNet 进行 MNIST 图像分类
  • Mac 安装protobuf2.5.0
  • 【竞技宝】LOL:JKL回归IG已无可能?
  • 对于app开发者对接广告联盟,需要哪些资质以及变现如何?
  • arkUI:绝对定位、相对定位、Z序控制(position、offset、zIndex)
  • 【C#设计模式(2)——工厂模式】
  • 【初阶数据结构与算法】线性表之单链表的定义与实现
  • 就是这个样的粗爆,手搓一个计算器:十进制到百分比转换器
  • 稳压二极管详解
  • 电磁兼容(EMC):GB 4343.1喀呖声 详解
  • js 好用的字符操作方法
  • 模块的导入
  • 快速上手Amazon SES:掌握企业级邮件解决方案
  • Python练习14
  • it行业热门岗位推荐,高薪就业不发愁
  • Ingress nginx 公开TCP服务
  • Linux服务器软件包管理的使用
  • 【理论笔记】网工基础知识 3 —— 数据交换技术
  • MYSQL知识总结
  • 简单的TCP程序
  • MySQL数据库专栏(五)连接MySQL数据库C API篇