大家好，我是小编阿贤。欢送各位大神关注《全栈技术圈》公众号，让技术更加简略易懂。
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 = val
document.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降级改变。欢送各位大神关注《全栈技术圈》公众号，让技术更加简略易懂。
发表回复