Vue2和Vue3的区别?Vue3有哪些新特性?

Vue2和Vue3的区别,Vue3有哪些新特性?

自Vue3发布已经有了一段时间,Vue3的生态环境也慢慢得到了完善,个
人认为Vue3将在近期替代Vue2成为Vue.js的主流写法,所以有了这次博客。


前言

随着前端架构的不断发展,Vue.js这门技术也越来越重要,很多人都开启Vue之旅,本文就介绍了Vue2迁移到Vue3有了那些变化。

一、Vue.js是什么?

Vue 是一套用于构建用户界面的渐进式框架, 自Vue.js问世以来所受关注度不断提高,在现在的市场上,Vue.js 是非常流行的 JavaScript 技术开发框架之一。

二、Vue2到Vue3最根本的变化是什么?

1.从选项式(options API)写法转换成函数式(composition API)写法

Vue2.x使用的是选项式接口(options API),即添加一个个属性来完成操作。但是选项式在搭建复杂的应用的时候会面临一个复用代码困难的问题,而vue3.x的组合式接口(composition API)则是为了解决这个问题而生,同时vue3.x为了兼容旧版的vue2.x,保留了选项式的写法。

2.双向数据绑定

vue2使用的是Object.defineProperty数据劫持,而vue3是使用proxy代理实现。
Object.defineProperty只能劫持对象里面的单个属性,如果要同时劫持多个属性,需要进行递归,造成速度的缓慢。
而proxy可以直接代理整个对象,不需要进行递归,所以速度会快很多。

Object.defineProperty底层原理代码如下(示例):

let data = {
   name:"小明",age:18,hobby:{
   names:"打游戏"}}function ob(data){
    
      if(!data || typeof data !== "object"){
    
           return   
       }​   
       Object.keys(data).forEach((key)=>{
           
                 definedReactive(data,key,data[key])
       })
}

function
  • 4
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值