深入探究Vue2響應(yīng)式原理的實(shí)現(xiàn)及存在的缺陷
一、Vue2中的響應(yīng)式原理
- Vue 2的響應(yīng)式原理：
在Vue 2中，響應(yīng)式是通過(guò)使用Object.defineProperty()方法來(lái)實(shí)現(xiàn)的。
在組件實(shí)例化過(guò)程中，Vue會(huì)對(duì)數(shù)據(jù)對(duì)象（data）進(jìn)行遞歸地遍歷，將每個(gè)屬性都轉(zhuǎn)換為getter/setter，并且為每個(gè)屬性創(chuàng)建一個(gè)依賴(lài)追蹤的系統(tǒng)。當(dāng)屬性被訪(fǎng)問(wèn)或修改時(shí)，getter/setter會(huì)觸發(fā)依賴(lài)追蹤系統(tǒng)，從而進(jìn)行依賴(lài)收集和派發(fā)更新，以保證數(shù)據(jù)和視圖的同步。 - 具體實(shí)現(xiàn)步驟如下：
1.創(chuàng)建Observer對(duì)象：通過(guò)遞歸地將data對(duì)象的屬性轉(zhuǎn)換為響應(yīng)式屬性，使用Object.defineProperty()為每個(gè)屬性添加getter和setter方法。Vue2中 通過(guò)使用 Object.defineProperty() 方法，將對(duì)象的屬性轉(zhuǎn)換成 getter 和 setter，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，會(huì)自動(dòng)觸發(fā)相應(yīng)的更新函數(shù)，實(shí)現(xiàn)數(shù)據(jù)的響應(yīng)式。
2.創(chuàng)建Dep對(duì)象：用來(lái)管理 Watcher，它用來(lái)收集依賴(lài)、刪除依賴(lài)和向依賴(lài)發(fā)送消息等。用于解耦屬性的依賴(lài)收集和派發(fā)更新操作。
3.創(chuàng)建Watcher對(duì)象：Watcher對(duì)象用于連接視圖和數(shù)據(jù)之間的橋梁，當(dāng)被依賴(lài)的屬性發(fā)生變化時(shí)，Watcher對(duì)象會(huì)接收到通知并更新視圖。當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，它會(huì)通知訂閱該數(shù)據(jù)的組件更新視圖。Watcher 在實(shí)例化時(shí)會(huì)將自己添加到 Dep 中，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，會(huì)觸發(fā)相應(yīng)的更新函數(shù)。
4.模板編譯：Vue會(huì)解析模板，將模板中的數(shù)據(jù)綁定指令轉(zhuǎn)譯為對(duì)應(yīng)的更新函數(shù)，以便在數(shù)據(jù)發(fā)生變化時(shí)調(diào)用。
在修改對(duì)象的值的時(shí)候，會(huì)觸發(fā)對(duì)應(yīng)的 setter， setter通知之前依賴(lài)收集得到的 Dep 中的Watcher，告訴它自己的值改變了，需要重新渲染視圖。這時(shí)候這些 Watcher就會(huì)開(kāi)始調(diào)用 update 來(lái)更新視圖, 對(duì)應(yīng)的getter觸發(fā)追蹤，把新值重新渲染到視圖上
input用v-model綁定數(shù)據(jù)，我們需要在input元素上添加事件監(jiān)聽(tīng)，每當(dāng)input事件被觸發(fā)時(shí)，就修改對(duì)應(yīng)的data,data里的數(shù)據(jù)又會(huì)響應(yīng)式更新回視圖
二、模擬簡(jiǎn)易版響應(yīng)式原理
實(shí)現(xiàn)思路：
定義一個(gè)Observe構(gòu)造函數(shù)用于對(duì)data對(duì)象的屬性進(jìn)行數(shù)據(jù)劫持。我們使用Object.defineProperty()方法對(duì)data對(duì)象的每個(gè)屬性進(jìn)行劫持，定義了屬性的getter和setter方法。
在getter方法中，我們返回屬性的值。在setter方法中，我們判斷新值是否與舊值不同，如果不同，則更新屬性的值，并觸發(fā)依賴(lài)更新。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<script type="text/javascript" >
let data = {
name:'前端百草閣',
age:21,
}
function Observer(obj){
//匯總對(duì)象中所有的鍵形成一個(gè)數(shù)組
const keys = Object.keys(obj)
//遍歷
keys.forEach((k)=>{
Object.defineProperty(this,k,{
get(){
return obj[k]
},
set(val){
console.log(`${k}被改了，我要通知Vue重新去解析模板.....`)
obj[k] = val
}
})
})
}
//創(chuàng)建一個(gè)監(jiān)視的實(shí)例對(duì)象，用于監(jiān)視data中屬性的變化
const obs = new Observer(data)
//準(zhǔn)備一個(gè)vm實(shí)例對(duì)象
let vm = {}
vm._data = data = obs
</script>
</body>
</html>
這個(gè)時(shí)候，原先data里的屬性就會(huì)各自有一個(gè)為他們服務(wù)的getter和setter，變成了具有響應(yīng)式的屬性
- 簡(jiǎn)易式版本的缺陷
- 缺陷一：正常vue中會(huì)做一個(gè)數(shù)據(jù)代理，當(dāng)訪(fǎng)問(wèn)vm.name時(shí)，訪(fǎng)問(wèn)的其實(shí)是vm._data.name，這樣做了數(shù)據(jù)代理后使用起來(lái)更方便
- 缺陷二： 簡(jiǎn)易式版本沒(méi)有考慮到data里面的屬性值還是對(duì)象的情況，在Vue中利用遞歸的方法將data里所有的屬性通過(guò)遞歸的方式都轉(zhuǎn)換為了響應(yīng)式屬性（即使屬性值是一個(gè)數(shù)組，數(shù)組里藏了對(duì)象，依然可以把對(duì)應(yīng)的屬性轉(zhuǎn)換為響應(yīng)式屬性）
這里有一個(gè)小tips,利用this指向obs，訪(fǎng)問(wèn)this(obs)里的屬性，getter返回的其實(shí)是obj里的屬性(數(shù)據(jù)代理)，為什么要這樣呢？如果說(shuō)你訪(fǎng)問(wèn)obj里的屬性，我真的通過(guò)getter給你返回了obj里對(duì)應(yīng)的屬性，返回的obj里的屬性又要去觸發(fā)自己的getter,那是不是就陷入死循環(huán)了呢？導(dǎo)致的問(wèn)題就是無(wú)論你是觸發(fā)getter 還是setter都會(huì)導(dǎo)致超出最大調(diào)用堆棧這個(gè)錯(cuò)誤
解決這個(gè)問(wèn)題還有一個(gè)辦法就是利用閉包，利用閉包把初始值傳給value存起來(lái)了，后續(xù)getter和setter都是針對(duì)閉包內(nèi)的value，和原本的obj隔離開(kāi)了,當(dāng)你訪(fǎng)問(wèn)或者設(shè)置obj.key的時(shí)候，就會(huì)去修改對(duì)應(yīng)的val(由于閉包val不會(huì)被垃圾機(jī)制回收)就不存在最大調(diào)用堆棧溢出的情況了
function observe(obj) {
if (!obj || typeof obj !== 'object') {
return;
}
Object.keys(obj).forEach(function(key) {
defineReactive(obj, key, obj[key]);
});
}
function defineReactive(obj, key, val) {
observe(val); // 遞歸地對(duì)data對(duì)象的屬性進(jìn)行數(shù)據(jù)劫持
Object.defineProperty(obj, key, {
get: function() {
return val;
},
set: function(newValue) {
if (newValue !== val) {
val = newValue;
// 觸發(fā)依賴(lài)更新
updateView();
}
}
});
}
function updateView() {
document.querySelector('h1').innerText = vm.message;
}
// 初始化數(shù)據(jù)劫持
observe(vm.$data);在上述代碼中，observe函數(shù)用于遞歸地對(duì)data對(duì)象的屬性進(jìn)行數(shù)據(jù)劫持。在defineReactive函數(shù)中，我們使用Object.defineProperty()方法對(duì)data對(duì)象的每個(gè)屬性進(jìn)行劫持，定義了屬性的getter和setter方法。
在getter方法中，我們返回屬性的值。在setter方法中，我們判斷新值是否與舊值不同，如果不同，則更新屬性的值，并觸發(fā)依賴(lài)更新。
最后，我們調(diào)用observe(vm.$data)來(lái)初始化數(shù)據(jù)劫持，使得Vue能夠捕獲到對(duì)data對(duì)象屬性的訪(fǎng)問(wèn)和修改操作，并觸發(fā)相應(yīng)的依賴(lài)更新。
三、Vue2響應(yīng)式數(shù)據(jù)帶來(lái)的缺陷
Vue 2中的響應(yīng)式數(shù)據(jù)存在一些缺陷，但通過(guò)使用Vue提供的補(bǔ)救辦法，可以解決大部分響應(yīng)式數(shù)據(jù)的問(wèn)題。
3.1 新增屬性的響應(yīng)問(wèn)題
Vue在初始化時(shí)會(huì)對(duì)data對(duì)象的屬性進(jìn)行數(shù)據(jù)劫持，但是對(duì)于后續(xù)新增的屬性，Vue無(wú)法自動(dòng)進(jìn)行響應(yīng)式處理。
Vue 無(wú)法探測(cè)普通的新增屬性 ，比如 this.myObject.saying = 'hi'，這個(gè)新增的saying屬性是不具有響應(yīng)式的，Vue探測(cè)不到
3.2 數(shù)組變動(dòng)的響應(yīng)問(wèn)題
Vue對(duì)數(shù)組的變動(dòng)（例如通過(guò)索引修改數(shù)組元素、通過(guò)splice方法刪除或插入元素）無(wú)法直接進(jìn)行響應(yīng)式處理。
例如此時(shí)在data里定義了這些數(shù)據(jù)
data:{
friends:[
{name:'jerry',age:35},
{name:'tony',age:36},
'前端百草閣'
]
}
不難發(fā)現(xiàn)數(shù)組中的對(duì)象都是響應(yīng)式的，但數(shù)組中的普通元素卻不是響應(yīng)式的，意味著若直接修改數(shù)組中的元素Vue無(wú)法監(jiān)測(cè)到
如果你通過(guò)數(shù)組下標(biāo)修改對(duì)象屬性的話(huà)是可以監(jiān)測(cè)的，因?yàn)閷?duì)象里的屬性都是響應(yīng)式的，但如果你通過(guò)數(shù)組下標(biāo)修改普通元素是無(wú)法監(jiān)測(cè)到的
如果用一個(gè)新數(shù)組覆蓋掉原先的數(shù)組，Vue是能監(jiān)測(cè)到的
3.3 對(duì)象屬性的刪除問(wèn)題
Vue無(wú)法直接檢測(cè)到對(duì)象屬性的刪除操作。利用delete刪除對(duì)象的屬性，無(wú)法被Vue監(jiān)測(cè)到
四、Vue2響應(yīng)式缺陷的解決辦法
4.1 新增屬性的響應(yīng)問(wèn)題
Vue.set( target, propertyName/index, value )
向響應(yīng)式對(duì)象中添加一個(gè) property，并確保這個(gè)新 property 同樣是響應(yīng)式的，且觸發(fā)視圖更新。它必須用于向響應(yīng)式對(duì)象上添加新 property，因?yàn)?Vue 無(wú)法探測(cè)普通的新增 property (比如 this.myObject.newProperty = ‘hi’)
給data中的student對(duì)象添加一個(gè)屬性，并且是響應(yīng)式的，有兩種寫(xiě)法，Vue.set或者this.$set
// Vue.set(this._data.student,'sex','男') // 這里加不加_data實(shí)際上都可以，就是一個(gè)數(shù)據(jù)代理，訪(fǎng)問(wèn)誰(shuí)都一樣，那我們肯定選擇偷懶啦 this.$set(this.student,'sex','男') // this代表vm vue實(shí)例對(duì)象
實(shí)現(xiàn)了新增了student對(duì)象里的sex屬性，并且該屬性有為自己服務(wù)的getter、setter（具有響應(yīng)式）
但是，Vue官網(wǎng)明確指出：注意對(duì)象不能是 Vue 實(shí)例，或者 Vue 實(shí)例的根數(shù)據(jù)對(duì)象。
簡(jiǎn)單來(lái)說(shuō)就是，set方法的第一個(gè)參數(shù)target不允許 是vm（vue實(shí)例）、也不允許是vm._data（根數(shù)據(jù)對(duì)象）
4.2 數(shù)組變動(dòng)的響應(yīng)問(wèn)題
第一中解決辦法，使用數(shù)組變異方法：Vue提供了一些數(shù)組變異方法（例如push、pop、shift、unshift、splice、sort和reverse），這些方法會(huì)觸發(fā)數(shù)組的響應(yīng)式更新。
如果不是這七個(gè)方法的話(huà)，比如調(diào)用slice等數(shù)組方法的話(huà)，記得要把返回的新數(shù)組覆蓋掉原來(lái)的舊數(shù)組，依然能觸發(fā)響應(yīng)式
第二種解決辦法，利用set方法，set方法不但能解決對(duì)象新增屬性的問(wèn)題，還能解決修改數(shù)組的問(wèn)題(用的不多)
4.3 對(duì)象屬性的刪除問(wèn)題
Vue.delete方法：用來(lái)刪除對(duì)象的屬性，并觸發(fā)響應(yīng)式更新。例如，可以使用Vue.delete(vm.someObject, ‘propertyToDelete’)來(lái)刪除一個(gè)屬性。
正常的delete方法，雖然確實(shí)刪除了屬性，但是無(wú)法被監(jiān)測(cè)到
利用Vue.delete完美解決刪除對(duì)象屬性無(wú)法被監(jiān)測(cè)的問(wèn)題（很少用到），或者vm.$delete(vm.person,'name')
總結(jié)
Vue 2的響應(yīng)式數(shù)據(jù)機(jī)制在大多數(shù)情況下能夠滿(mǎn)足我們的需求，但也存在一些缺陷。
首先，Vue無(wú)法直接響應(yīng)新增的屬性，需要使用特定的方法進(jìn)行補(bǔ)救。其次，對(duì)于數(shù)組的變動(dòng)和對(duì)象屬性的刪除，Vue也無(wú)法直接進(jìn)行響應(yīng)式處理，需要使用相應(yīng)的方法來(lái)觸發(fā)更新。這些缺陷在實(shí)際開(kāi)發(fā)中可能會(huì)帶來(lái)一些困擾。
但幸運(yùn)的是，Vue提供了一些補(bǔ)救的辦法，如Vue.set和Vue.delete方法，以及數(shù)組變異方法。通過(guò)這些補(bǔ)救措施，我們可以彌補(bǔ)Vue 2響應(yīng)式數(shù)據(jù)機(jī)制的不足，提升開(kāi)發(fā)效率和用戶(hù)體驗(yàn)。盡管如此，我們也期待Vue未來(lái)版本的改進(jìn)，在響應(yīng)式數(shù)據(jù)方面能夠更加智能和靈活，以滿(mǎn)足更多復(fù)雜場(chǎng)景的需求。
以上就是深入探究Vue2響應(yīng)式原理的實(shí)現(xiàn)及存在的缺陷的詳細(xì)內(nèi)容，更多關(guān)于Vue2響應(yīng)式原理的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue computed的set方法無(wú)效問(wèn)題及解決
這篇文章主要介紹了vue computed的set方法無(wú)效問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue3+ts重復(fù)參數(shù)提取成方法多處調(diào)用以及字段無(wú)值時(shí)不傳字段給后端問(wèn)題
在進(jìn)行API開(kāi)發(fā)時(shí),優(yōu)化參數(shù)傳遞是一個(gè)重要的考量,傳統(tǒng)方法中,即使參數(shù)值為空,也會(huì)被包含在請(qǐng)求中發(fā)送給后端,這可能會(huì)導(dǎo)致不必要的數(shù)據(jù)處理,而優(yōu)化后的方法則只會(huì)傳遞那些實(shí)際有值的字段,從而提高數(shù)據(jù)傳輸?shù)挠行院秃蠖颂幚淼男?/div> 2024-10-10
vue?項(xiàng)目?jī)?yōu)雅的對(duì)url參數(shù)加密詳解
這篇文章主要為大家介紹了vue?項(xiàng)目?jī)?yōu)雅的對(duì)url參數(shù)加密詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
vue2導(dǎo)入使用vue-codemirror組件的教程詳解
vue-codemirror是一個(gè)基于Vue的代碼在線(xiàn)編輯器組件,它封裝了CodeMirror編輯器,使得在Vue項(xiàng)目中可以方便地使用CodeMirror,下面我們就來(lái)看看vue-codemirror的具體使用吧2024-02-02
這篇文章主要介紹了vue3如何實(shí)現(xiàn)掛載并使用axios，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
今天小編就為大家分享一篇vue自定義全局共用函數(shù)詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了vue中Axios的封裝和API接口的管理,主要目的就是在幫助我們簡(jiǎn)化代碼和利于后期的更新維護(hù)，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Vue生命周期區(qū)別詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-07-07
本篇文章主要介紹了詳解基于vue-cli優(yōu)化的webpack配置，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
vue3.0?setup中使用vue-router問(wèn)題
這篇文章主要介紹了vue3.0?setup中使用vue-router問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10最新評(píng)論