大家好球散，我是小編阿賢溉奕。歡迎各位大神關(guān)注《全棧技術(shù)圈》瘾敢，讓技術(shù)更加簡單易懂。
1. vue2和vue3實例區(qū)別
1.1 創(chuàng)建一個vue2實例
在vue2里面的Vue是一個構(gòu)造函數(shù)，通過該構(gòu)造函數(shù)創(chuàng)建一個Vue實例肯尺，data選項可以是對象侧巨，也可以是方法返回一個對象舅锄。可以通過el選項指定一個掛載的容器司忱，也可以通過$mount()方法指定掛載的容器皇忿。
new Vue({
el: '#app',
data: {
name: 'Vue2',
age: '6'
}
}).$mount('#app')
1.2 創(chuàng)建一個vue3實例
在vue3里面Vue是一個對象碉怔，通過該對象的createApp()方法，創(chuàng)建一個Vue實例禁添。vue3中撮胧，取消了el選項。vue3中老翘，無論是組件和是vue實例芹啥，data選項都必須是一個方法，由方法返回對象铺峭。
Vue.createApp({
//el: '#app',
data() {
return {
name: 'Vue3',
age: '2'
}
}
}).mount('#app')
2.Vue2和Vue3的響應(yīng)式區(qū)別
2.1 vue2的響應(yīng)式
在addSex方法中后添加的屬性是非響應(yīng)式的墓怀。在delName方法中直接使用delete方式刪除對象的屬性后，不具備響應(yīng)式卫键。在addFood方法中操作數(shù)組后同時要具有響應(yīng)式傀履。推薦使用$set方法根據(jù)下標(biāo)添加數(shù)組元素，確保新添加的元素同樣具備響應(yīng)式莉炉。在delFood方法中直接根據(jù)下標(biāo)刪除數(shù)組元素钓账，不具備響應(yīng)式。
new Vue({
el:'#app',
data:{
student:{
name:'張三',
age:20
},
foods:['魚翅','松茸','魚子醬','帝王蟹','熊掌']
},
methods: {
addSex(){ //添加性別
// this.student.sex='男'
//可以通過$forceUpdate()強(qiáng)制頁面更新一次
// this.$forceUpdate()
//推薦使用$set方法給對象添加新的屬性絮宁，確保新添加的屬性同樣具備響應(yīng)式
this.$set(this.student,'sex','男')
},
delName(){ //刪除姓名
// 不具備響應(yīng)式
// delete this.student.name
//使用$delete方法梆暮，刪除對象的屬性后，繼續(xù)具備響應(yīng)式
this.$delete(this.student,'name')
},
addFood(){ //添加食物
// 具有響應(yīng)式绍昂，必須要使用下面的方法：
// 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)
//不具備響應(yīng)式
// this.foods[3] = null
//使用$delete方法啦粹，刪除數(shù)組中指定位置的元素，繼續(xù)具備響應(yīng)式
this.$delete(this.foods,3)
}
}
})
2.2 vue3修復(fù)了vue2中響應(yīng)式的所有缺陷
vue3后續(xù)新增屬性值具有響應(yīng)式窘游，delete自己刪除屬性也具有響應(yīng)式唠椭。
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的響應(yīng)式原理
3.1 vue2的響應(yīng)式原理
vue2在實例化時，會將data里面的所有數(shù)據(jù)采用 Object.defineProperty 進(jìn)行處理忍饰，實現(xiàn)實現(xiàn)響應(yīng)式功能贪嫂。但是你之后往data里面添加的數(shù)據(jù)，由于沒有采用 Object.defineProperty 進(jìn)行處理喘批，所以不具備響應(yīng)式撩荣。$set()方法，內(nèi)部就是對單個屬性重新采用 Object.defineProperty 進(jìn)行處理饶深，從而具備響應(yīng)式餐曹。
//源對象
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', {
//讀取屬性的值台猴，調(diào)用get方法
get(){
return obj.name;
},
//設(shè)置屬性的值，調(diào)用set方法
set(val){
obj.name = val;
document.querySelector('#name').innerHTML = obj.name;
}
});
Object.defineProperty(obj2, 'age', {
//讀取屬性的值，調(diào)用get方法
get(){
return obj.age;
},
//設(shè)置屬性的值饱狂，調(diào)用set方法
set(val){
obj.age = val;
document.querySelector('#age').innerHTML = obj.age;
}
});
Object.defineProperty(obj2,'sex',{
//讀取屬性的值曹步，調(diào)用get方法
get(){
return obj.sex
},
//設(shè)置屬性的值，調(diào)用set方法
set(val){
obj.sex = val
document.querySelector('#sex').innerHTML = obj.sex
}
});
3.2 vue3的響應(yīng)式原理
使用new Proxy()創(chuàng)建一個代理對象休讳，通過放射對象從指定的對象身上發(fā)射出指定的屬性值讲婚。
// 源對象
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];
// 通過放射對象從指定的對象身上發(fā)射出指定的屬性值
return Reflect.get(target, property);
},
//設(shè)置屬性
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的作用是：將原來分散開來定義的數(shù)據(jù)筹麸，方法，計算屬性雏婶，監(jiān)聽器物赶，組合起來定義一個完整的業(yè)務(wù)。
// ref用于定義響應(yīng)式數(shù)據(jù)
let {ref} = Vue
Vue.createApp({
// setup是組合式api的舞臺留晚，所有的組合式api都要在setup里面使用
setup() {
//定義汽車相關(guān)數(shù)據(jù)
// 使用ref()方法酵紫，定義一個響應(yīng)式對象
let carName=ref('保時捷')
let carPrice=ref('100W')
//定義汽車相關(guān)方法
function updateCar(){
//修改對象的值，要通過value屬性
carName.value = '特斯拉'
carPrice.value = '80W'
}
return{
//返回汽車相關(guān)數(shù)據(jù)
carName,
carPrice,
updateCar,
}
})
})
總結(jié)：
Vue2升級Vue3帶來更快的改動主要有兩方面
1错维、vue3重新審視了 vdom奖地，更改了自身對于 vdom的對比算法。vdom從之前的每次更新需五，都進(jìn)行一次完整遍歷對比鹉动，改為了切分區(qū)塊樹轧坎，來進(jìn)行動態(tài)內(nèi)容更新宏邮。也就是只更新 vdom的綁定了動態(tài)數(shù)據(jù)的部分，把速度提高了6倍缸血；
2蜜氨、 把 definePerproty改為了 proxy，對于 JavaScript引擎更加友好捎泻，響應(yīng)更加高效飒炎。
本篇文件先寫到這后續(xù)我們在深入Vue3升級改動。歡迎各位大神關(guān)注《全棧技術(shù)圈》笆豁，讓技術(shù)更加簡單易懂郎汪。
本作品系原創(chuàng)煞赢。禁止轉(zhuǎn)載，如需轉(zhuǎn)載請通過簡信或評論聯(lián)系作者哄孤。
