vue2和vue3的区别 详细介绍(一)

1.vue2.0相比,vue3.0的变化主要有以下几点:

  • 组合API和选项式API,开发人员根据自己情况和习惯,可以选择不同写法,组合式更加接近与原生的写法

  • 性能提升:Vue3这个框架将Vue全部重构了。新的框架。底层采用TS来进行重构,性能提升能达到100%

  • 对TS的支持,Vue3底层默认采用TS进行开发。我们Vue开发过程中,一般也会默认结合TS来使用

  • 按需加载

  • 新增组件:Fragment、Teleport、Suspense

  • Vue3目前创建项目采用了新的打包工具,vite工具(xxx)团队他们自己发布的一个打包。目标干掉webpack

vue3的优势:
  • 更快:vue3重写了虚拟dom。性能提升很多
  • 更小:新增了tree shaking技术,你们项目中没有用到的代码。打包会默认去掉。
  • 更易于维护:Flow到TypeScript变化,让我们代码实现起来更加规范

2、Vue3的响应式

     比较vue2和vue3的响应式

Vue2的响应式
  • 对象: 通过 defineProperty 对对象的已有属性值的读取和修改进行劫持(监视/拦截)
  • 数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持
  • 存在问题:对象直接新添加的属性或删除已有属性, 界面不会自动更新;直接通过下标替换元素或更新 length, 界面不会自动更新
  • 通过 Proxy(代理): 拦截对 data 任意属性的任意(13 种)操作, 包括属性值的读写, 属 性的添加, 属性的删除等…
  • 通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作
Vue3的响应式
  • 通过 Proxy(代理): 拦截对 data 任意属性的任意(13 种)操作, 包括属性值的读写, 属 性的添加, 属性的删除等…
  • 通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作

3.vue2和vue3生命周期对比

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值