VUE2升级成VUE3的优化与区别

大家好，我是小编阿贤。欢迎各位大神关注《全栈技术圈》，让技术更加简单易懂。

1. vue2和vue3实例区别

1.1 创建一个vue2实例

在vue2里面的Vue是一个构造函数，通过该构造函数创建一个Vue实例，data选项可以是对象，也可以是方法返回一个对象。可以通过el选项指定一个挂载的容器，也可以通过$mount()方法指定挂载的容器。

 new Vue({el: '#app',data: {name: 'Vue2',age: '6'}
}).$mount('#app')

1.2 创建一个vue3实例

在vue3里面Vue是一个对象，通过该对象的createApp()方法，创建一个Vue实例。vue3中，取消了el选项。vue3中，无论是组件和是vue实例，data选项都必须是一个方法，由方法返回对象。

Vue.createApp({//el: '#app',data() {return {name: 'Vue3',age: '2'}}
}).mount('#app')

2.Vue2和Vue3的响应式区别

2.1 vue2的响应式

在addSex方法中后添加的属性是非响应式的。在delName方法中直接使用delete方式删除对象的属性后，不具备响应式。在addFood方法中操作数组后同时要具有响应式。推荐使用$set方法根据下标添加数组元素，确保新添加的元素同样具备响应式。在delFood方法中直接根据下标删除数组元素，不具备响应式。

new Vue({el:'#app',data:{student:{name:'张三',age:20},foods:['鱼翅','松茸','鱼子酱','帝王蟹','熊掌']},methods: {addSex(){ //添加性别// this.student.sex='男'//可以通过$forceUpdate()强制页面更新一次// this.$forceUpdate()//推荐使用$set方法给对象添加新的属性，确保新添加的属性同样具备响应式this.$set(this.student,'sex','男')},delName(){ //删除姓名// 不具备响应式// delete this.student.name//使用$delete方法，删除对象的属性后，继续具备响应式this.$delete(this.student,'name')},addFood(){ //添加食物// 具有响应式，必须要使用下面的方法：// push pop unshift shift sort reverse splice// this.foods.push('佛跳墙')// this.foods[5] = '佛跳墙'// this.$forceUpdate()this.$set(this.foods,5,'佛跳墙')},//删除食物delFood(){// this.foods.splice(3,1)//不具备响应式// this.foods[3] = null//使用$delete方法，删除数组中指定位置的元素，继续具备响应式this.$delete(this.foods,3)}}
})

2.2 vue3修复了vue2中响应式的所有缺陷

vue3后续新增属性值具有响应式，delete自己删除属性也具有响应式。

 Vue.createApp({data() {return {student:{name:'张三',age:20},foods:['鱼翅','松茸','鱼子酱','帝王蟹','熊掌']}},methods: {addSex(){this.student.sex = '男'},delName(){delete this.student.name},addFood(){this.foods[5] = '佛跳墙'},delFood(){delete this.foods[3]}}
}).mount("#app")

3 Vue2和Vue3的响应式原理

3.1 vue2的响应式原理

vue2在实例化时，会将data里面的所有数据采用 Object.defineProperty 进行处理，实现实现响应式功能。但是你之后往data里面添加的数据，由于没有采用 Object.defineProperty 进行处理，所以不具备响应式。$set()方法，内部就是对单个属性重新采用 Object.defineProperty 进行处理，从而具备响应式。

//源对象
let obj = {name:'张三',age:20,sex:'男'
};
document.querySelector('#name').innerHTML = obj.name;
document.querySelector('#age').innerHTML = obj.age;
document.querySelector('#sex').innerHTML = obj.sex;
//定义一个obj2对象，作为obj的代理对象
let obj2 = {};
//通过Object.defineProperty方法，给obj2添加属性
Object.defineProperty(obj2, 'name', {//读取属性的值，调用get方法get(){return obj.name;},//设置属性的值，调用set方法set(val){obj.name = val;document.querySelector('#name').innerHTML = obj.name;}
});
Object.defineProperty(obj2, 'age', {//读取属性的值，调用get方法get(){return obj.age;},//设置属性的值，调用set方法set(val){obj.age = val;document.querySelector('#age').innerHTML = obj.age;}
});
Object.defineProperty(obj2,'sex',{//读取属性的值，调用get方法get(){return obj.sex},//设置属性的值，调用set方法set(val){obj.sex = valdocument.querySelector('#sex').innerHTML = obj.sex}
});

3.2 vue3的响应式原理

使用new Proxy()创建一个代理对象，通过放射对象从指定的对象身上发射出指定的属性值。

// 源对象
let obj3 = {name:'张三',age:20,sex:'男'
}
document.querySelector('#name2').innerHTML = obj3.name
document.querySelector('#age2').innerHTML = obj3.age
document.querySelector('#sex2').innerHTML = obj3.sex
let obj4 = new Proxy(obj3, {//获取属性get(target, property){// 直接返回源对象身上的指定的属性值// return target[property];// 通过放射对象从指定的对象身上发射出指定的属性值return Reflect.get(target, property);},//设置属性set(target, property, value){// target[property] = value;Reflect.set(target,property,value);document.querySelector(`#${property}2`).innerHTML = Reflect.get(target,property);},//删除属性deleteProperty(target, property){// return delete target[property];document.querySelector(`#${property}2`).remove();return Reflect.deleteProperty(target,property);}
});

4 Vue3新推出的组合式API

4.1 vue2中只能这样写代码，vue3也可以这样写

data() {return {carName:'保时捷',carPrice:'100W'}
},
methods: {updateCar(){this.carName = '特斯拉'this.carPrice = '80W'}
}

4.2 vue3引入了全新的功能，组合式API

组合式api的作用是：将原来分散开来定义的数据，方法，计算属性，监听器，组合起来定义一个完整的业务。

// ref用于定义响应式数据
let {ref} = Vue
Vue.createApp({// setup是组合式api的舞台，所有的组合式api都要在setup里面使用setup() {//定义汽车相关数据// 使用ref()方法，定义一个响应式对象let carName=ref('保时捷')let carPrice=ref('100W')//定义汽车相关方法function updateCar(){//修改对象的值，要通过value属性carName.value = '特斯拉'carPrice.value = '80W'}return{//返回汽车相关数据carName,carPrice,updateCar,}})
})

总结：

Vue2升级Vue3带来更快的改动主要有两方面
1、vue3重新审视了 vdom，更改了自身对于 vdom的对比算法。vdom从之前的每次更新，都进行一次完整遍历对比，改为了切分区块树，来进行动态内容更新。也就是只更新 vdom的绑定了动态数据的部分，把速度提高了6倍；
2、把 definePerproty改为了 proxy，对于 JavaScript引擎更加友好，响应更加高效。
本篇文件先写到这后续我们在深入Vue3升级改动。欢迎各位大神关注《全栈技术圈》，让技术更加简单易懂。