關(guān)于vue中如何監(jiān)聽(tīng)數(shù)組變化
前言
前段時(shí)間學(xué)習(xí)了關(guān)于vue中響應(yīng)式數(shù)據(jù)的原理,(并作了學(xué)習(xí)筆記vue響應(yīng)式原理),其實(shí)是通過(guò)Object.defineProperty控制getter和setter,并利用觀察者模式完成的響應(yīng)式設(shè)計(jì)。那么數(shù)組有一系列的操作方法,這些方法并不會(huì)觸發(fā)數(shù)組的getter和setter方法。那么vue中針對(duì)數(shù)組的響應(yīng)式設(shè)計(jì)是如何實(shí)現(xiàn)的呢...那么我們一起去學(xué)習(xí)下吧~
源碼部分
https://github.com/vuejs/vue/blob/dev/src/core/observer/array.js
從哪開(kāi)始第一步學(xué)習(xí)呢
Emmmm...
我覺(jué)得要先把Vue中的數(shù)據(jù)響應(yīng)式原理弄清楚,這樣對(duì)于理解vue中是如何檢測(cè)數(shù)組的變化才比較好,所以,可以去網(wǎng)上找下文章然后配合源碼進(jìn)行閱讀,相信你一定會(huì)理解的。推薦下我之前看的一篇博客,還有我看過(guò)后自己寫(xiě)的學(xué)習(xí)記錄吧,哈哈。
vue響應(yīng)式原理
vue的雙向綁定原理和實(shí)現(xiàn)
好的,先看看這個(gè)吧。哈哈!
從圖開(kāi)始
咱們先看下下面的圖,先了解下vue中實(shí)現(xiàn)的思路,這樣接下來(lái)再看源碼的實(shí)現(xiàn),會(huì)一清二楚,明明白白。

看到這個(gè)圖然后思考一下,是不是大致了解了~
首先判斷瀏覽器是否支持__proto__指針
重寫(xiě)數(shù)組的這7個(gè)方法,然后根據(jù)是否支持__proto__,將改寫(xiě)后的數(shù)組指向數(shù)組的prototype。
是不是很簡(jiǎn)單?。?!
看看源碼吧
了解了實(shí)現(xiàn)原理,那么我們?cè)倏纯丛创a吧,看下源碼主要是更深入的了解作者是如何實(shí)現(xiàn)的,也可以看下優(yōu)秀的代碼編碼方式,加以學(xué)習(xí)。
關(guān)于一些解釋我就寫(xiě)在下面的代碼塊中了哈!
//https://github.com/vuejs/vue/blob/dev/src/core/observer/array.js
//def方法是基于Object.defineProperty封裝的一層方法,很簡(jiǎn)單,我會(huì)在下面把代碼貼出來(lái),免得大家去找了。
import { def } from '../util/index'
//保存下原生的數(shù)組原型對(duì)象
const arrayProto = Array.prototype
//進(jìn)行原型連接,將arrayMethods的原型指向Array.prototype
export const arrayMethods = Object.create(arrayProto)
const methodsToPatch = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]
methodsToPatch.forEach(function (method) {
// 緩存原生的方法
const original = arrayProto[method]
def(arrayMethods, method, function mutator (...args) {
var args = [],
len = arguments.length;
while (len--) args[len] = arguments[len];
const result = original.apply(this, args) // 原來(lái)的數(shù)組方法執(zhí)行結(jié)果
const ob = this.__ob__ // 這個(gè)__ob__就是Observe的實(shí)例~~~~
let inserted
switch (method) {
case 'push':
case 'unshift':
inserted = args
break
case 'splice':
inserted = args.slice(2)
break
}
if (inserted) ob.observeArray(inserted) // 如果數(shù)組有變化,則重新調(diào)用observeArray
// notify change
ob.dep.notify() //
return result
})
})
這個(gè)是關(guān)于Observe的代碼:
var Observer = function Observer(value) {
this.value = value;
this.dep = new Dep();
this.vmCount = 0;
def(value, '__ob__', this); //這里會(huì)看到在每個(gè)對(duì)象數(shù)據(jù)上都會(huì)綁定一個(gè)Observe的實(shí)例,所以上面代碼中的this.__ob__就是這個(gè)
if (Array.isArray(value)) { // 這里判斷是否是數(shù)組類型的數(shù)據(jù),如果是的話就走observeArray
if (hasProto) {
protoAugment(value, arrayMethods);
} else {
copyAugment(value, arrayMethods, arrayKeys);
}
this.observeArray(value); //這里就是處理數(shù)組類型的數(shù)據(jù),如下
} else {
this.walk(value);
}
};
如下是observeArray的實(shí)現(xiàn):
Observer.prototype.observeArray = function observeArray(items) {
for (var i = 0, l = items.length; i < l; i++) {
observe(items[i]); // 這個(gè)observe方法如下
}
};
在這里我們看下observe這個(gè)方法:
function observe(value, asRootData) {
if (!isObject(value) || value instanceof VNode) {
return
}
var ob;
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
ob = value.__ob__;
} else if (
shouldObserve &&
!isServerRendering() &&
(Array.isArray(value) || isPlainObject(value)) &&
Object.isExtensible(value) &&
!value._isVue
) {
ob = new Observer(value);
}
if (asRootData && ob) {
ob.vmCount++;
}
return ob
}
這個(gè)是關(guān)于def方法的實(shí)現(xiàn),很簡(jiǎn)單我就不說(shuō)了哈:
function def (obj, key, val, enumerable) {
Object.defineProperty(obj, key, {
value: val,
enumerable: !!enumerable,
writable: true,
configurable: true
});
}
以上就是關(guān)于vue中如何監(jiān)聽(tīng)數(shù)組變化的詳細(xì)內(nèi)容,更多關(guān)于vue如何監(jiān)聽(tīng)數(shù)組的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Vue2.0用 watch 觀察 prop 變化(不觸發(fā))
本篇文章主要介紹了Vue2.0用 watch 觀察 prop 變化(不觸發(fā)),非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-09-09
ElementUI?$notify通知方法中渲染自定義組件實(shí)現(xiàn)
這篇文章主要為大家介紹了ElementUI?$notify通知方法中渲染自定義組件實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06
VUE對(duì)接deepseekAPI調(diào)用方式
文章介紹了如何在Vue項(xiàng)目中對(duì)接DeepSeek API,包括在開(kāi)放平臺(tái)注冊(cè)賬號(hào)申請(qǐng)APIKey、安裝axios庫(kù)、創(chuàng)建API調(diào)用函數(shù)以及在Vue組件中調(diào)用該函數(shù)2025-01-01
vue+ElementUI實(shí)現(xiàn)訂單頁(yè)動(dòng)態(tài)添加產(chǎn)品數(shù)據(jù)效果實(shí)例代碼
本篇文章主要介紹了vue+ElementUI實(shí)現(xiàn)訂單頁(yè)動(dòng)態(tài)添加產(chǎn)品效果實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07
vue3中element-plus?Upload上傳文件代碼示例
這篇文章主要介紹了vue3中element-plus?Upload上傳文件的相關(guān)資料,在時(shí)間開(kāi)發(fā)中上傳文件是經(jīng)常遇到的一個(gè)需求,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
解決vue中修改export default中腳本報(bào)一大堆錯(cuò)的問(wèn)題
今天小編就為大家分享一篇解決vue中修改export default中腳本報(bào)一大堆錯(cuò)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08

