接下來(lái)重點(diǎn)來(lái)看Vue的數(shù)據(jù)響應(yīng)系統(tǒng)。我看很多文章在講數(shù)據(jù)響應(yīng)的時(shí)候先用一個(gè)簡(jiǎn)單的例子介紹了數(shù)據(jù)雙向綁定的思路，然后再看源碼。這里也借鑒了這種方式，感覺(jué)這樣的確更有利于理解。
數(shù)據(jù)雙向綁定的思路
1. 對(duì)象
先來(lái)看元素是對(duì)象的情況。假設(shè)我們有一個(gè)對(duì)象和一個(gè)監(jiān)測(cè)方法：
|
1
2
3
4
5
6
7
8
9
10
|
const data = { a: 1};/*** exp[String, Function]: 被觀測(cè)的字段* fn[Function]: 被觀測(cè)對(duì)象改變后執(zhí)行的方法*/function watch (exp, fn) {} |
我們可以調(diào)用watch方法，當(dāng)a的值改變后打印一句話：
|
1
2
3
|
watch('a', () => { console.log('a 改變了')}) |
要實(shí)現(xiàn)這個(gè)功能，我們首先要能知道屬性a被修改了。這時(shí)候就需要使用Object.defineProperty函數(shù)把屬性a變成訪問(wèn)器屬性：
|
1
2
3
4
5
6
7
8
|
Object.defineProperty(data, 'a', { set () { console.log('設(shè)置了 a') }, get () { console.log('讀取了 a') }}) |
這樣當(dāng)我們修改a的值：data.a = 2時(shí)，就會(huì)打印出設(shè)置了 a, 當(dāng)我們獲取a的值時(shí)：data.a, 就會(huì)打印出讀取了 a.
在屬性的讀取和設(shè)置中我們已經(jīng)能夠進(jìn)行攔截并做一些操作了。可是在屬性修改時(shí)我們并不想總打印設(shè)置了 a這句話，而是有一個(gè)監(jiān)聽(tīng)方法watch，不同的屬性有不同的操作，對(duì)同一個(gè)屬性也可能監(jiān)聽(tīng)多次。
這就需要一個(gè)容器，把對(duì)同一個(gè)屬性的監(jiān)聽(tīng)依賴收集起來(lái)，在屬性改變時(shí)再取出依次觸發(fā)。既然是在屬性改變時(shí)觸發(fā)依賴，我們就可以放在setter里面，在getter中收集依賴。這里我們先不考慮依賴被重復(fù)收集等一些情況
|
1
2
3
4
5
6
7
8
9
|
const dep = [];Object.defineProperty(data, 'a', { set () { dep.forEach(fn => fn()); }, get () { dep.push(fn); }}) |
我們定義了容器dep, 在讀取a屬性時(shí)觸發(fā)get函數(shù)把依賴存入dep中；在設(shè)置a屬性時(shí)觸發(fā)set函數(shù)把容器內(nèi)的依賴挨個(gè)執(zhí)行。
那fn從何而來(lái)呢？再看一些我們的監(jiān)測(cè)函數(shù)watch
|
1
2
3
|
watch('a', () => { console.log('a 改變了')}) |
該函數(shù)有兩個(gè)參數(shù)，第一個(gè)是被觀測(cè)的字段，第二個(gè)是被觀測(cè)字段的值改變后需要觸發(fā)的操作。其實(shí)第二個(gè)參數(shù)就是我們要收集的依賴fn。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
const data = { a: 1};const dep = [];Object.defineProperty(data, 'a', { set () { dep.forEach(fn => fn()); }, get () { // Target就是該變量的依賴函數(shù) dep.push(Target); }})let Target = null;function watch (exp, fn) { // 將fn賦值給Target Target = fn; // 讀取屬性，觸發(fā)get函數(shù)，收集依賴 data[exp];} |
現(xiàn)在僅能夠觀測(cè)a一個(gè)屬性，為了能夠觀測(cè)對(duì)象data上面的所有屬性，我們將定義訪問(wèn)器屬性的那段代碼封裝一下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
function walk () { for (let key in data) { const dep = []; const val = data[key]; Object.defineProperty(data, key, { set (newVal) { if (newVal === val) return; val = newVal; dep.forEach(fn => fn()); }, get () { // Target就是該變量的依賴函數(shù) dep.push(Target); return val; } }) }} |
用for循環(huán)遍歷data上的所有屬性，對(duì)每一個(gè)屬性都用Object.defineProperty改為訪問(wèn)器屬性。
現(xiàn)在監(jiān)測(cè)data里面基本類(lèi)型值的屬性沒(méi)問(wèn)題了，如果data的屬性值又是一個(gè)對(duì)象呢：
|
1
2
3
4
5
|
data: { a: { aa: 1 }} |
我們?cè)賮?lái)改一下我們的walk函數(shù)，當(dāng)val還是一個(gè)對(duì)象時(shí)，遞歸調(diào)用walk:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
function walk (data) { for (let key in data) { const dep = []; const val = data[key]; // 如果val是對(duì)象，遞歸調(diào)用walk，將其屬性轉(zhuǎn)為訪問(wèn)器屬性 if (Object.prototype.toString.call(val) === '[object Object]') { walk(val); } Object.defineProperty(data, key, { set (newVal) { if (newVal === val) return; val = newVal; dep.forEach(fn => fn()); }, get () { // Target就是該變量的依賴函數(shù) dep.push(Target); return val; } }) }} |
添加了一段判斷邏輯，如果某個(gè)屬性的屬性值仍然是對(duì)象，就遞歸調(diào)用walk函數(shù)。
雖然經(jīng)過(guò)上面的改造，data.a.aa是訪問(wèn)器屬性了，但下面但代碼仍然不能運(yùn)行：
|
1
2
3
|
watch('a.aa', () => { console.log('修改了 a.b')}) |
這是為什么呢？再看我們的watch函數(shù)：
|
1
2
3
4
5
6
|
function watch (exp, fn) { // 將fn賦值給Target Target = fn; // 讀取屬性，觸發(fā)get函數(shù)，收集依賴 data[exp];} |
在讀取屬性的時(shí)候是data[exp]，放到這里就是data[a.aa]，這自然是不對(duì)的。正確的讀取方式應(yīng)該是data[a][aa]. 我們需要對(duì)watch函數(shù)做改造：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
function watch (exp, fn) { // 將fn賦值給Target Target = fn; let obj = data; if (/\./.test(exp)) { const path = exp.split('.'); path.forEach(p => obj = obj[p]) return; } data[exp];} |
這里增加了一個(gè)判斷邏輯，當(dāng)監(jiān)測(cè)的字段中包含.時(shí)，就執(zhí)行if語(yǔ)句塊的內(nèi)容。首先使用split函數(shù)將字符串轉(zhuǎn)換為數(shù)組：a.aa => [a, aa]. 然后使用循環(huán)讀取到嵌套的屬性值，并且return結(jié)束。
Vue中提供了$watch實(shí)例方法來(lái)觀測(cè)表達(dá)式，對(duì)復(fù)雜的表達(dá)式用函數(shù)取代：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// 函數(shù)vm.$watch( function () { // 表達(dá)式 `this.a + this.b` 每次得出一個(gè)不同的結(jié)果時(shí) // 處理函數(shù)都會(huì)被調(diào)用。 // 這就像監(jiān)聽(tīng)一個(gè)未被定義的計(jì)算屬性 return this.a + this.b }, function (newVal, oldVal) { // 做點(diǎn)什么 }) |
當(dāng)?shù)谝粋€(gè)函數(shù)執(zhí)行時(shí)，就會(huì)觸發(fā)this.a、this.b的get攔截器，從而收集依賴。
我們的watch函數(shù)第一個(gè)參數(shù)是函數(shù)時(shí)watch函數(shù)要做些什么改變呢？要想能夠收集依賴，就得讀取屬性觸發(fā)get函數(shù)。當(dāng)?shù)谝粋€(gè)參數(shù)是函數(shù)時(shí)怎么讀取屬性呢？函數(shù)內(nèi)是有讀取屬性的，所以只要執(zhí)行一下函數(shù)就行了。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
function watch (exp, fn) { // 將fn賦值給Target Target = fn; // 如果 exp 是函數(shù)，直接執(zhí)行該函數(shù) if (typeof exp === 'function') { exp() return } let obj = data; if (/\./.test(exp)) { const path = exp.split('.'); path.forEach(p => obj = obj[p]) return; } data[exp];} |
對(duì)象的處理暫且就到這里，具體的我們?cè)谠创a中去看。
2. 數(shù)組
數(shù)組有幾個(gè)變異方法會(huì)改變數(shù)組本身：push pop shift unshift splice sort reverse, 那怎么才能知道何時(shí)調(diào)用了這些變異方法呢？我們可以在保證原來(lái)方法功能不變的前提下對(duì)方法進(jìn)行擴(kuò)展。可是如何擴(kuò)展呢？
數(shù)組實(shí)例的方法都來(lái)自于數(shù)組構(gòu)造函數(shù)的原型, 數(shù)組實(shí)例的__proto__屬性指向數(shù)組構(gòu)造函數(shù)的原型，即：arr.__proto__ === Array.prototype, 我們可以定義一個(gè)對(duì)象，它的原型指向Array.prototype，然后在這個(gè)對(duì)象中重新定義與變異方法重名的函數(shù)，然后讓實(shí)例的__proto__指向該對(duì)象，這樣調(diào)用變異方法的時(shí)候，就會(huì)先調(diào)用重定義的方法。
const mutationMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// 創(chuàng)建以Array.prototype為原型的對(duì)象const arrayMethods = Object.create(Array.prototype);// 緩存Array.prototypeconst originMethods = Array.prototype;mutationMethods.forEach(method => { arrayMethods[method] = function (...args) { // 調(diào)用原來(lái)的方法獲取結(jié)果 const result = originMethods[method].apply(this, args); console.log(`重定義了${method}方法`) return result; }}) |
我們來(lái)測(cè)試一下：
|
1
2
3
|
const arr = [];arr.__proto__ = arrayMethods;arr.push(1); |
可以看到在控制臺(tái)打印出了重定義了push方法這句話。
先大概有個(gè)印象，接下來(lái)我們來(lái)看源碼吧。
實(shí)例對(duì)象代理訪問(wèn)data
在initState方法中，有這樣一段代碼：
|
1
2
3
4
5
6
7
|
const opts = vm.$options...if (opts.data) { initData(vm)} else { observe(vm._data = {}, true /* asRootData */)} |
opts就是vm.$options，如果opts.data存在，就執(zhí)行initData方法，否則執(zhí)行observe方法，并給vm._data賦值空對(duì)象。我們就從initData方法開(kāi)始，開(kāi)啟探索數(shù)據(jù)響應(yīng)系統(tǒng)之路。
initData方法定義在core/instance/state.js文件中：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
function initData (vm: Component) { let data = vm.$options.data data = vm._data = typeof data === 'function' ? getData(data, vm) : data || {} if (!isPlainObject(data)) { data = {} process.env.NODE_ENV !== 'production' && warn( 'data functions should return an object:\n' + 'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function', vm ) } // proxy data on instance const keys = Object.keys(data) const props = vm.$options.props const methods = vm.$options.methods let i = keys.length while (i--) { const key = keys[i] if (process.env.NODE_ENV !== 'production') { if (methods && hasOwn(methods, key)) { warn( `Method "${key}" has already been defined as a data property.`, vm ) } } if (props && hasOwn(props, key)) { process.env.NODE_ENV !== 'production' && warn( `The data property "${key}" is already declared as a prop. ` + `Use prop default value instead.`, vm ) } else if (!isReserved(key)) { proxy(vm, `_data`, key) } } // observe data observe(data, true /* asRootData */)} |
內(nèi)容有點(diǎn)多我們從上往下依次來(lái)看，首先是這樣一段代碼：
|
1
2
3
4
|
let data = vm.$options.data data = vm._data = typeof data === 'function' ? getData(data, vm) : data || {} |
我們知道在經(jīng)過(guò)選項(xiàng)合并后，data已經(jīng)變成一個(gè)函數(shù)了。那為何這里還有data是否是一個(gè)函數(shù)的判斷呢？這是因?yàn)閎eforeCreate生命周期是在mergeOptions函數(shù)之后initState函數(shù)之前調(diào)用的，mergeOptions函數(shù)就是處理選項(xiàng)合并的。如果用戶在beforeCreate中修改了vm.$options.data的值呢？那它就可能不是一個(gè)函數(shù)了，畢竟用戶的操作是不可控的，所以這里還是有必要判斷一下的。
正常情況下也就是data是一個(gè)函數(shù)，就會(huì)調(diào)用getData函數(shù)，并將data和Vue實(shí)例vm作為參數(shù)傳過(guò)去。該函數(shù)也定義在當(dāng)前頁(yè)面中：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
export function getData (data: Function, vm: Component): any { // #7573 disable dep collection when invoking data getters pushTarget() try { return data.call(vm, vm) } catch (e) { handleError(e, vm, `data()`) return {} } finally { popTarget() }} |
其實(shí)該函數(shù)就是通過(guò)調(diào)用data獲取到數(shù)據(jù)對(duì)象并返回：data.call(vm, vm). 用try...catch包裹是為了捕獲可能出現(xiàn)的錯(cuò)誤，如果出錯(cuò)的話調(diào)用handleError函數(shù)并返回一個(gè)空對(duì)象。
函數(shù)的開(kāi)頭和結(jié)尾分別調(diào)用了pushTarget和popTarget, 這是為了防止使用 props 數(shù)據(jù)初始化 data 數(shù)據(jù)時(shí)收集冗余的依賴。
再回到initData函數(shù)中，所以現(xiàn)在data和vm._data就是最終的數(shù)據(jù)對(duì)象了。
接下來(lái)是一個(gè)if判斷：
|
1
2
3
4
5
6
7
8
|
if (!isPlainObject(data)) { data = {} process.env.NODE_ENV !== 'production' && warn( 'data functions should return an object:\n' + 'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function', vm ) } |
isPlainObject是判斷是否是一個(gè)純對(duì)象的，如果data不是一個(gè)對(duì)象，在非生產(chǎn)環(huán)境下給出警告信息。
繼續(xù)往下看：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
// proxy data on instance// 獲取data對(duì)象的鍵const keys = Object.keys(data)// 獲取props，是個(gè)對(duì)象const props = vm.$options.props// 獲取methods，是個(gè)對(duì)象const methods = vm.$options.methodslet i = keys.length// 循環(huán)遍歷data的鍵while (i--) { const key = keys[i] // 如果methods存在，并且methods中存在與data對(duì)象相同的鍵，發(fā)出警告。data優(yōu)先 if (process.env.NODE_ENV !== 'production') { if (methods && hasOwn(methods, key)) { warn( `Method "${key}" has already been defined as a data property.`, vm ) } } // 如果props存在，并且props中存在與data對(duì)象相同的鍵，發(fā)出警告。 props優(yōu)先 if (props && hasOwn(props, key)) { process.env.NODE_ENV !== 'production' && warn( `The data property "${key}" is already declared as a prop. ` + `Use prop default value instead.`, vm ) } else if (!isReserved(key)) { // isReserved 函數(shù)用來(lái)檢測(cè)一個(gè)字符串是否以 $ 或者 _ 開(kāi)頭，主要用來(lái)判斷一個(gè)字段的鍵名是否是保留的 proxy(vm, `_data`, key) }}// observe dataobserve(data, true /* asRootData */) |
while中的兩個(gè)if條件判斷了props和methods中是否有和data對(duì)象相同的鍵，因?yàn)檫@三者中的屬性都可以通過(guò)實(shí)例對(duì)象代理訪問(wèn)，如果相同就會(huì)出現(xiàn)沖突了。
|
1
2
3
4
5
6
7
8
9
|
const vm = new Vue({ props: { a: { default: 2 } } data: { a: 1 }, methods: { a () { console.log(3) } }}) |
當(dāng)調(diào)用vm.a的時(shí)候，就會(huì)產(chǎn)生覆蓋現(xiàn)象。為了防止這種情況出現(xiàn)，就在這里做了判斷。
再看else if中的內(nèi)容，當(dāng)!isReserved(key)成立時(shí)，執(zhí)行proxy(vm,_data, key)。 isReserved函數(shù)的作用是判斷一個(gè)字符串是否以 $ 或者 _ 開(kāi)頭, 因?yàn)閂ue內(nèi)部的變量是以$或_開(kāi)頭，防止沖突。如果 key 不是以 $或 _ 開(kāi)頭，那么將執(zhí)行 proxy 函數(shù)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
const sharedPropertyDefinition = { enumerable: true, configurable: true, get: noop, set: noop}export function proxy (target: Object, sourceKey: string, key: string) { sharedPropertyDefinition.get = function proxyGetter () { return this[sourceKey][key] } sharedPropertyDefinition.set = function proxySetter (val) { this[sourceKey][key] = val } Object.defineProperty(target, key, sharedPropertyDefinition)} |
proxy函數(shù)通過(guò)Object.defineProperty在實(shí)例對(duì)象vm上定義了與data數(shù)據(jù)字段相同的訪問(wèn)器屬性，代理的值是vm._data上對(duì)應(yīng)的屬性值。當(dāng)訪問(wèn)this.a時(shí)，實(shí)際訪問(wèn)的是this._data.a的值。
最后一句代碼是
|
1
2
|
// observe dataobserve(data, true /* asRootData */) |
調(diào)用observe將data數(shù)據(jù)對(duì)象轉(zhuǎn)換成響應(yīng)式的。
observe工廠函數(shù)
observe函數(shù)定義在core/observer/index.js文件中, 我們找到該函數(shù)的定義，一點(diǎn)點(diǎn)來(lái)看
|
1
2
3
|
if (!isObject(value) || value instanceof VNode) { return} |
首先判斷如果數(shù)據(jù)不是一個(gè)對(duì)象或者是一個(gè)VNode實(shí)例，直接返回。
|
1
|
let ob: Observer | void |
接著定義了ob變量，它是一個(gè)Observer實(shí)例，可以看到observe函數(shù)的最后返回了ob.
下面是一個(gè)if...else分支：
|
1
2
3
4
5
6
7
8
9
10
11
|
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分支，用hasOwn判斷了數(shù)據(jù)對(duì)象是否包含__ob__屬性，并且判斷屬性值是否是Observer的實(shí)例。如果條件為真的話，就把value.__ob__的值賦給ob。
為什么會(huì)有這個(gè)判斷呢？每個(gè)數(shù)據(jù)對(duì)象被觀測(cè)后都會(huì)在該對(duì)象上定義一個(gè)__ob__屬性, 所以這個(gè)判斷是為了防止重復(fù)觀測(cè)一個(gè)對(duì)象。
接著是else if分支，這個(gè)條件判斷有點(diǎn)多，我們一個(gè)個(gè)來(lái)看。
shouldObserve必須為true
該變量也定義在 core/observer/index.js 文件內(nèi),
|
1
2
3
4
5
6
7
8
9
|
/** * In some cases we may want to disable observation inside a component's * update computation. */export let shouldObserve: boolean = trueexport function toggleObserving (value: boolean) { shouldObserve = value} |
這段代碼定義了shouldObserve變量，初始化為true。接著定義了toggleObserving函數(shù)，該函數(shù)接收一個(gè)參數(shù)，這個(gè)參數(shù)用來(lái)更新shouldObserve的值。shouldObserve為true時(shí)可以進(jìn)行觀測(cè)，為false時(shí)將不會(huì)進(jìn)行觀測(cè)。
!isServerRendering()必須為true
isServerRendering函數(shù)用來(lái)判斷是否是服務(wù)端渲染，只有當(dāng)不是服務(wù)端渲染的時(shí)候才會(huì)進(jìn)行觀測(cè)
(Array.isArray(value) || isPlainObject(value)) 必須為真
只有當(dāng)數(shù)據(jù)對(duì)象是數(shù)組或者純對(duì)象時(shí)才進(jìn)行觀測(cè)
Object.isExtensible(value)必須為true
被觀測(cè)的數(shù)據(jù)對(duì)象必須是可擴(kuò)展的, 普通對(duì)象默認(rèn)就是可擴(kuò)展當(dāng)。以下三個(gè)方法可以將對(duì)象變得不可擴(kuò)展：
Object.preventExtensions()、 Object.freeze()、Object.seal()
!value._isVue必須為真
Vue實(shí)例含有_isVue屬性，這個(gè)判斷是為了防止Vue實(shí)例被觀測(cè)
以上條件滿足之后，就會(huì)執(zhí)行代碼ob = new Observer(value)，創(chuàng)建一個(gè)Observer實(shí)例
Observer 構(gòu)造函數(shù)
Observer也定義在core/observer/index.js文件中，它是一個(gè)構(gòu)造函數(shù)，用來(lái)將數(shù)據(jù)對(duì)象轉(zhuǎn)換成響應(yīng)式的。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
export class Observer { value: any; dep: Dep; vmCount: number; // number of vms that have this object as root $data constructor (value: any) { this.value = value this.dep = new Dep() this.vmCount = 0 def(value, '__ob__', this) if (Array.isArray(value)) { if (hasProto) { protoAugment(value, arrayMethods) } else { copyAugment(value, arrayMethods, arrayKeys) } this.observeArray(value) } else { this.walk(value) } } /** * Walk through all properties and convert them into * getter/setters. This method should only be called when * value type is Object. */ walk (obj: Object) { const keys = Object.keys(obj) for (let i = 0; i < keys.length; i++) { defineReactive(obj, keys[i]) } } /** * Observe a list of Array items. */ observeArray (items: Array<any>) { for (let i = 0, l = items.length; i < l; i++) { observe(items[i]) } }} |
以上是Observer的全部代碼，現(xiàn)在我們從constructor開(kāi)始，來(lái)看一下實(shí)例化Observer都做了什么。
__ob__ 屬性
constructor開(kāi)始先初始化了幾個(gè)實(shí)例屬性
|
1
2
3
4
|
this.value = valuethis.dep = new Dep()this.vmCount = 0def(value, '__ob__', this) |
value就是實(shí)例化Observer時(shí)傳遞的參數(shù)，現(xiàn)在將它賦給了實(shí)例對(duì)象的value屬性。dep屬性指向?qū)嵗腄ep實(shí)例對(duì)象，它就是用來(lái)收集依賴的容器。vmCount屬性被初始化為0.
接著使用def函數(shù)為數(shù)據(jù)對(duì)象添加了__ob__屬性，它的值就是當(dāng)前Observer實(shí)例對(duì)象。def定義在core/util/lang.js文件中，是對(duì)Object.defineProperty的封裝。
|
1
2
3
4
5
6
7
8
|
export function def (obj: Object, key: string, val: any, enumerable?: boolean) { Object.defineProperty(obj, key, { value: val, enumerable: !!enumerable, writable: true, configurable: true })} |
用def來(lái)定義__ob__屬性是要把它定義成不可枚舉的，這樣遍歷對(duì)象就不會(huì)遍歷到它了。
假設(shè)我們的數(shù)據(jù)對(duì)象是
|
1
2
3
|
data = { a: 1} |
添加__ob__屬性后變成
|
1
2
3
4
5
6
7
8
|
data = { a: 1, __ob__: { value: data, // data 數(shù)據(jù)對(duì)象本身 dep: new Dep(), // Dep實(shí)例 vmCount: 0 }} |
處理純對(duì)象
接下來(lái)是一個(gè)if...else判斷, 來(lái)區(qū)分?jǐn)?shù)組和對(duì)象，因?yàn)閷?duì)數(shù)組和對(duì)象的處理不同。
|
1
2
3
4
5
6
7
8
9
10
|
if (Array.isArray(value)) { if (hasProto) { protoAugment(value, arrayMethods) } else { copyAugment(value, arrayMethods, arrayKeys) } this.observeArray(value)} else { this.walk(value)} |
我們先來(lái)看是對(duì)象的情況，也就是執(zhí)行this.walk(value)
walk函數(shù)就定義在constructor的下面
|
1
2
3
4
5
6
|
walk (obj: Object) { const keys = Object.keys(obj) for (let i = 0; i < keys.length; i++) { defineReactive(obj, keys[i]) }} |
該方法就是用for循環(huán)遍歷了對(duì)象的屬性，并對(duì)每個(gè)屬性都調(diào)用了defineReactive方法。
defineReactive 函數(shù)
defineReactive也定義在core/observer/index.js文件中，找到它的定義：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
/** * Define a reactive property on an Object. */export function defineReactive ( obj: Object, key: string, val: any, customSetter?: ?Function, shallow?: boolean) { const dep = new Dep() const property = Object.getOwnPropertyDescriptor(obj, key) if (property && property.configurable === false) { return } // cater for pre-defined getter/setters const getter = property && property.get const setter = property && property.set if ((!getter || setter) && arguments.length === 2) { val = obj[key] } let childOb = !shallow && observe(val) Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { ... }, set: function reactiveSetter (newVal) { ... } })} |
因代碼太長(zhǎng)，省略了部分內(nèi)容，之后我們?cè)倬唧w看。該函數(shù)的主要作用就是將數(shù)據(jù)對(duì)象的數(shù)據(jù)屬性轉(zhuǎn)換為訪問(wèn)器屬性
函數(shù)體內(nèi)首先定義了dep常量，它的值是Dep實(shí)例，用來(lái)收集對(duì)應(yīng)字段的依賴。
接下來(lái)是這樣一段代碼：
|
1
2
3
4
|
const property = Object.getOwnPropertyDescriptor(obj, key)if (property && property.configurable === false) { return} |
先通過(guò)Object.getOwnPropertyDescriptor獲取字段的屬性描述對(duì)象，再判斷該字段是否是可配置的，如果不可配置，直接返回。因?yàn)椴豢膳渲玫膶傩允遣荒芡ㄟ^(guò)Object.defineProperty改變其屬性定義的。
再往下接著看：
|
1
2
3
4
5
6
|
// cater for pre-defined getter/settersconst getter = property && property.getconst setter = property && property.setif ((!getter || setter) && arguments.length === 2) { val = obj[key]} |
先保存屬性描述對(duì)象里面的get和set方法。如果這個(gè)屬性已經(jīng)是訪問(wèn)器屬性了，那它就存在get或set方法了，下面的操作會(huì)使用Object.defineProperty重寫(xiě)get和set方法，為了不影響原來(lái)的讀寫(xiě)操作，就先緩存setter/getter。
接下來(lái)是一個(gè)if判斷，如果滿足條件的話，就讀取該屬性的值。
再下面是這樣一句代碼：
|
1
|
let childOb = !shallow && observe(val) |
因?yàn)閷傩灾祐al也可能是一個(gè)對(duì)象，所以調(diào)用observe繼續(xù)觀測(cè)。但前面有一個(gè)條件，只有當(dāng)shallow為假時(shí)才會(huì)進(jìn)行深度觀測(cè)。shallow是defineReactive的第五個(gè)參數(shù)，我們?cè)趙alk中調(diào)用該函數(shù)時(shí)并沒(méi)有傳遞該參數(shù)，所以這里它的值是undefined。!shallow的是true，所以這里會(huì)進(jìn)行深度觀測(cè)。
不進(jìn)行深度觀測(cè)的我們?cè)趇nitRender函數(shù)中見(jiàn)過(guò)：
|
1
2
3
4
5
6
|
defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, () => { !isUpdatingChildComponent && warn(`$attrs is readonly.`, vm)}, true)defineReactive(vm, '$listeners', options._parentListeners || emptyObject, () => { !isUpdatingChildComponent && warn(`$listeners is readonly.`, vm)}, true) |
在Vue實(shí)例上定義屬性$attrs和$listeners時(shí)就是非深度觀測(cè)。
在get中收集依賴
接下來(lái)就是使用Object.defineProperty設(shè)置訪問(wèn)器屬性，先看一下get函數(shù)：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
get: function reactiveGetter () { const value = getter ? getter.call(obj) : val if (Dep.target) { dep.depend() if (childOb) { childOb.dep.depend() if (Array.isArray(value)) { dependArray(value) } } } return value}, |
get函數(shù)首先是要返回屬性值，還有就是在這里收集依賴。
第一行代碼就是獲取屬性值。先判斷了getter是否存在，getter就是屬性原有的get函數(shù)，如果存在的話調(diào)用該函數(shù)獲取屬性值，否則的話就用val作為屬性值。
接下來(lái)是收集依賴的代碼：
|
1
2
3
4
5
6
7
8
9
|
if (Dep.target) { dep.depend() if (childOb) { childOb.dep.depend() if (Array.isArray(value)) { dependArray(value) } }} |
首先判斷Dep.target是否存在，Dep.target就是要收集的依賴，如果存在的話，執(zhí)行if語(yǔ)句塊內(nèi)的代碼。
dep.depend()dep對(duì)象的depend方法執(zhí)行就是收集依賴。
然后判斷了childOb是否存在，存在的話執(zhí)行childOb.dep.depend(). 那么childOb的值是誰(shuí)呢？
如果我們有個(gè)數(shù)據(jù)對(duì)象：
|
1
2
3
4
5
|
data = { a: { b: 1 }} |
經(jīng)過(guò)observe觀測(cè)之后，添加__ob__屬性，變成如下模樣：
|
1
2
3
4
5
6
7
|
data = { a: { b: 1, __ob__: { value, dep, vmCount } }, __ob__: { value, dep, vmCount }} |
對(duì)于屬性a來(lái)說(shuō)，childOb === data.a.__ob__, 所以childOb.dep.depend()就是data.a.__ob__.dep.depend()
在if語(yǔ)句里面又一個(gè)if判斷：
|
1
2
3
|
if (Array.isArray(value)) { dependArray(value)} |
如果屬性值是數(shù)組，調(diào)用dependArray函數(shù)逐個(gè)觸發(fā)數(shù)組元素的依賴收集
在set函數(shù)中觸發(fā)依賴
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
set: function reactiveSetter (newVal) { const value = getter ? getter.call(obj) : val /* eslint-disable no-self-compare */ if (newVal === value || (newVal !== newVal && value !== value)) { return } /* eslint-enable no-self-compare */ if (process.env.NODE_ENV !== 'production' && customSetter) { customSetter() } // #7981: for accessor properties without setter if (getter && !setter) return if (setter) { setter.call(obj, newVal) } else { val = newVal } childOb = !shallow && observe(newVal) dep.notify()} |
set函數(shù)主要是設(shè)置屬性值和觸發(fā)依賴。
|
1
2
3
4
5
|
const value = getter ? getter.call(obj) : val/* eslint-disable no-self-compare */if (newVal === value || (newVal !== newVal && value !== value)) { return} |
首先也是獲取原來(lái)的屬性值。為什么有這一步呢？因?yàn)橐轮底霰容^，如果新舊值相等，就可以直接返回不用接下來(lái)的操作了。在if條件中，newVal === value這個(gè)我們都明白，那后面這個(gè)(newVal !== newVal && value !== value)條件是什么意思呢？
這是因?yàn)橐粋€(gè)特殊的值NaN
|
1
|
NaN === NaN // false |
如果newVal !== newVal,說(shuō)明新值是NaN；如果value !== value，那么舊值也是NaN。那么新舊值也是相等的，也不需要處理。
|
1
2
3
4
|
/* eslint-enable no-self-compare */if (process.env.NODE_ENV !== 'production' && customSetter) { customSetter()} |
在非生產(chǎn)環(huán)境下，如果customSetter函數(shù)存在，將執(zhí)行該函數(shù)。customSetter是defineReactive的第四個(gè)參數(shù)，上面我們看initRender的時(shí)候有傳過(guò)這個(gè)參數(shù)：
|
1
2
3
|
defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, () => { !isUpdatingChildComponent && warn(`$attrs is readonly.`, vm)}, true) |
第四個(gè)參數(shù)是一個(gè)箭頭函數(shù)，當(dāng)修改vm.$attrs時(shí)，會(huì)打印警告信息$attrs是只讀的。所以customSetter的作用就是打印輔助信息。
|
1
2
3
4
5
6
|
if (getter && !setter) returnif (setter) { setter.call(obj, newVal)} else { val = newVal} |
如果存在getter不存在setter的話，直接返回。getter和setter就是屬性自身的get和set函數(shù)。
下面就是設(shè)置屬性值。如果setter存在的話，調(diào)用setter函數(shù)，保證原來(lái)的屬性設(shè)置操作不變。否則用新值替換舊值。
最后是這兩句代碼：
|
1
2
|
childOb = !shallow && observe(newVal)dep.notify() |
如果新值也是一個(gè)數(shù)組或純對(duì)象的話，這個(gè)新值是未觀測(cè)的。所以在需要深度觀測(cè)的情況下，要調(diào)用observe對(duì)新值進(jìn)行觀測(cè)。最后調(diào)用dep.notify()觸發(fā)依賴。
處理數(shù)組
看完了純對(duì)象的處理，再來(lái)看一下數(shù)組是怎么轉(zhuǎn)換為響應(yīng)式的。數(shù)組有些方法會(huì)改變數(shù)組本身，我們稱(chēng)之為變異方法，這些方法有：push pop shift unshift reverse sort splice，如何在調(diào)用這些方法的時(shí)候觸發(fā)依賴呢？看一下Vue的處理。
|
1
2
3
4
5
6
|
if (hasProto) { protoAugment(value, arrayMethods)} else { copyAugment(value, arrayMethods, arrayKeys)}this.observeArray(value) |
首先是一個(gè)if...else 判斷，hasProto定義在core/util/env.js文件中。
|
1
2
|
// can we use __proto__?export const hasProto = '__proto__' in {} |
判斷當(dāng)前環(huán)境是否可以使用對(duì)象的 __proto__ 屬性, 該屬性在IE11及更高版本中才能使用。
如果條件為true的話，調(diào)用protoAugment方法, 傳遞了兩個(gè)參數(shù)，一個(gè)是數(shù)組實(shí)例本身，一個(gè)是arrayMethods（代理原型）。
|
1
2
3
4
5
6
7
8
9
|
/** * Augment a target Object or Array by intercepting * the prototype chain using __proto__ */function protoAugment (target, src: Object) { /* eslint-disable no-proto */ target.__proto__ = src /* eslint-enable no-proto */} |
該方法的作用就是將數(shù)組實(shí)例的原型指向代理原型。這樣當(dāng)數(shù)組實(shí)例調(diào)用變異方法的時(shí)候就能先走代理原型重定義的方法。我們看一下arrayMethods的實(shí)現(xiàn)，它定義在core/observer/array.js文件中：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
import { def } from '../util/index'const arrayProto = Array.prototypeexport const arrayMethods = Object.create(arrayProto)const methodsToPatch = [ 'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']/** * Intercept mutating methods and emit events */methodsToPatch.forEach(function (method) { // cache original method const original = arrayProto[method] def(arrayMethods, method, function mutator (...args) { const result = original.apply(this, args) const ob = this.__ob__ let inserted switch (method) { case 'push': case 'unshift': inserted = args break case 'splice': inserted = args.slice(2) break } if (inserted) ob.observeArray(inserted) // notify change ob.dep.notify() return result })}) |
這是這個(gè)文件的全部?jī)?nèi)容，該文件只做了一件事，就是導(dǎo)出arrayMethods對(duì)象。
|
1
2
|
const arrayProto = Array.prototypeexport const arrayMethods = Object.create(arrayProto) |
arrayMethods是以數(shù)組的原型為原型創(chuàng)建的對(duì)象。
|
1
2
3
4
5
6
7
8
9
|
const methodsToPatch = [ 'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'] |
這是定義了數(shù)組的變異方法。
接著for循環(huán)遍歷變異方法，用def在代理原型上定義了與變異方法同名的方法。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
methodsToPatch.forEach(function (method) { // cache original method const original = arrayProto[method] def(arrayMethods, method, function mutator (...args) { const result = original.apply(this, args) const ob = this.__ob__ let inserted switch (method) { case 'push': case 'unshift': inserted = args break case 'splice': inserted = args.slice(2) break } if (inserted) ob.observeArray(inserted) // notify change ob.dep.notify() return result })}) |
首先緩存了數(shù)組原本的變異方法
|
1
|
const original = arrayProto[method] |
然后用def在arrayMethods對(duì)象上定義了與變異方法同名的函數(shù)。函數(shù)內(nèi)首先調(diào)用了original原來(lái)的函數(shù)獲取結(jié)果
|
1
|
const result = original.apply(this, args) |
并在函數(shù)末尾返回result。保證了攔截函數(shù)的功能與原來(lái)方法的功能是一致的。
|
1
2
3
|
const ob = this.__ob__...ob.dep.notify() |
這兩句代碼就是觸發(fā)依賴。當(dāng)變異方法被調(diào)用時(shí)，數(shù)組本身就被改變了，所以要觸發(fā)依賴。
再看其余的代碼：
|
1
2
3
4
5
6
7
8
9
10
11
|
let insertedswitch (method) { case 'push': case 'unshift': inserted = args break case 'splice': inserted = args.slice(2) break}if (inserted) ob.observeArray(inserted) |
這段代碼的作用就是收集新添加的元素，將其變成響應(yīng)式數(shù)據(jù)。
push和unshift方法的參數(shù)就是要添加的元素，所以inserted = args。splice方法從第三個(gè)參數(shù)到最后一個(gè)參數(shù)都是要添加的新元素，所以inserted = args.slice(2)。最后，如果存在新添加的元素，調(diào)用observeArray函數(shù)對(duì)其進(jìn)行觀測(cè)。
以上是支持__proto__屬性的時(shí)候，那不支持的時(shí)候呢？調(diào)用copyAugment方法，并傳遞了三個(gè)參數(shù)。前兩個(gè)跟protoAugment方法的參數(shù)一樣，一個(gè)是數(shù)組實(shí)例本身，一個(gè)是arrayMethods代理原型，還有一個(gè)是arrayKeys，
|
1
|
const arrayKeys = Object.getOwnPropertyNames(arrayMethods) |
它的值就是定義在arrayMethods對(duì)象上的所有的鍵，也就是所要攔截的變異方法的名稱(chēng)。函數(shù)定義如下：
|
1
2
3
4
5
6
|
function copyAugment (target: Object, src: Object, keys: Array<string>) { for (let i = 0, l = keys.length; i < l; i++) { const key = keys[i] def(target, key, src[key]) }} |
這個(gè)方法的作用就是在數(shù)組實(shí)例上定義與變異方法同名的函數(shù)，從而實(shí)現(xiàn)攔截。
if else代碼之后，調(diào)用了observeArray方法this.observeArray(value), 并將數(shù)組實(shí)例作為參數(shù)。
observeArray方法的定義如下：
|
1
2
3
4
5
6
7
8
|
/*** Observe a list of Array items.*/observeArray (items: Array<any>) { for (let i = 0, l = items.length; i < l; i++) { observe(items[i]) }} |
循環(huán)遍歷數(shù)組實(shí)例，并對(duì)數(shù)組的每一項(xiàng)再進(jìn)行觀測(cè)。這是因?yàn)槿绻麛?shù)組元素是數(shù)組或純對(duì)象的話不進(jìn)行這一步數(shù)組元素就不是響應(yīng)式的，這是為了實(shí)現(xiàn)深度觀測(cè)。比如：
|
1
2
3
4
5
6
7
|
const vm = new Vue({ data: { a: [[1,2]] }})vm.a.push(1); // 能夠觸發(fā)響應(yīng)vm.a[1].push(1); // 不能觸發(fā)響應(yīng) |
所以需要遞歸觀測(cè)數(shù)組元素。
Vue.set($set) 和 Vue.delete($delete) 的實(shí)現(xiàn)
我們知道，為對(duì)象或數(shù)組直接添加或刪除元素Vue是攔截不到的。我們需要使用Vue.set、Vue.delete去解決，Vue還在實(shí)例對(duì)象上定義了$set $delete方便我們使用。其實(shí)不管是實(shí)例方法還是全局方法它們的指向都是一樣的。我們來(lái)看以下它們的定義。
$set $delete定義在core/instance/state.js文件中的stateMixin方法中
|
1
2
3
4
5
6
7
8
|
export function stateMixin (Vue: Class<Component>) { ... Vue.prototype.$set = set Vue.prototype.$delete = del ...} |
Vue.set和Vue.delete定義在core/global-api/index.js文件中的initGlobalAPI函數(shù)中：
|
1
2
3
4
5
6
7
8
|
export function initGlobalAPI (Vue: GlobalAPI) { ... Vue.set = set Vue.delete = del ...} |
可以看到它們的函數(shù)值是相同的。 set和del定義在core/observer/index.js文件中。我們先來(lái)看一下set的定義
set
從上到下來(lái)看set的函數(shù)體，顯示這個(gè)if判斷：
|
1
2
3
4
5
|
if (process.env.NODE_ENV !== 'production' && (isUndef(target) || isPrimitive(target))) { warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)} |
isUndef
|
1
2
3
|
export function isUndef (v: any): boolean %checks { return v === undefined || v === null} |
判斷變量是否是未定義，或者值為null。
isPrimitive
|
1
2
3
4
5
6
7
8
9
|
export function isPrimitive (value: any): boolean %checks { return ( typeof value === 'string' || typeof value === 'number' || // $flow-disable-line typeof value === 'symbol' || typeof value === 'boolean' )} |
判斷變量是否是原始類(lèi)型。
所以這個(gè)if語(yǔ)句的作用就是，如果target是undefined或者null或者它的類(lèi)型是原始類(lèi)型，在非生產(chǎn)環(huán)境下打印警告信息。
再看下一個(gè)if語(yǔ)句：
|
1
2
3
4
5
|
if (Array.isArray(target) && isValidArrayIndex(key)) { target.length = Math.max(target.length, key) target.splice(key, 1, val) return val} |
isValidArrayIndex
|
1
2
3
4
|
export function isValidArrayIndex (val: any): boolean { const n = parseFloat(String(val)) return n >= 0 && Math.floor(n) === n && isFinite(val)} |
判斷變量是否是有效的數(shù)組索引。
如果target是一個(gè)數(shù)組，并且key是一個(gè)有效的數(shù)組索引，就執(zhí)行if語(yǔ)句塊內(nèi)的代碼
我們知道splice變異方法是可以觸發(fā)響應(yīng)的，target.splice(key, 1, val) 就利用了替換元素的能力，將指定位置元素的值替換為新值。所以數(shù)組就是利用splice添加元素的。另外，當(dāng)要設(shè)置的元素的索引大于數(shù)組長(zhǎng)度時(shí) splice 無(wú)效，所以target的length取兩者中的最大值。
|
1
2
3
4
|
if (key in target && !(key in Object.prototype)) { target[key] = val return val} |
這個(gè)if條件的意思是該屬性已經(jīng)在target對(duì)象上有定義了，那么只要重新設(shè)置它的值就行了。因?yàn)樵诩儗?duì)象中，已經(jīng)存在的屬性就是響應(yīng)式的了。
|
1
2
3
4
5
6
7
8
|
const ob = (target: any).__ob__if (target._isVue || (ob && ob.vmCount)) { process.env.NODE_ENV !== 'production' && warn( 'Avoid adding reactive properties to a Vue instance or its root $data ' + 'at runtime - declare it upfront in the data option.' ) return val} |
target._isVue
擁有_isVue屬性說(shuō)明這是一個(gè)Vue實(shí)例‘
(ob && ob.vmCount)
ob就是target.__ob__，ob.vmCount也就是target.__ob__.vmCount。來(lái)看一下這段代碼：
|
1
2
3
4
5
|
export function observe (value: any, asRootData: ?boolean): Observer | void { if (asRootData && ob) { ob.vmCount++ }} |
asRootData表示是否是根數(shù)據(jù)對(duì)象。什么是根數(shù)據(jù)對(duì)象呢？看一下哪里調(diào)用observe函數(shù)的時(shí)候傳遞了第二個(gè)參數(shù)：
|
1
2
3
4
5
6
|
function initData (vm: Component) { ... // observe data observe(data, true /* asRootData */)} |
在initData中調(diào)用observe的時(shí)候傳遞了第二個(gè)參數(shù)為true，那根數(shù)據(jù)對(duì)象也就是data。也就是說(shuō)當(dāng)使用 Vue.set/$set 函數(shù)為根數(shù)據(jù)對(duì)象添加屬性時(shí)，是不被允許的。
所以當(dāng)target是Vue實(shí)例或者是根數(shù)據(jù)對(duì)象時(shí)，在非生產(chǎn)環(huán)境會(huì)打印警告信息。
|
1
2
3
4
|
if (!ob) { target[key] = val return val} |
當(dāng)!ob為true時(shí)，說(shuō)明不存在__ob__屬性，那target也就不是響應(yīng)式的，直接變更屬性值就行。
|
1
2
|
defineReactive(ob.value, key, val)ob.dep.notify() |
這里就是給對(duì)象添加新的屬性，并保證新添加的屬性是響應(yīng)式的。
ob.dep.notify()觸發(fā)響應(yīng)。
del
看完了set，再來(lái)看delete操作。
|
1
2
3
4
5
|
if (process.env.NODE_ENV !== 'production' && (isUndef(target) || isPrimitive(target)) ) { warn(`Cannot delete reactive property on undefined, null, or primitive value: ${(target: any)}`)} |
這個(gè)if判斷跟set函數(shù)的一樣。如果target是undefined、null或者原始類(lèi)型值，在非生產(chǎn)環(huán)境下打印警告信息。
|
1
2
3
4
|
if (Array.isArray(target) && isValidArrayIndex(key)) { target.splice(key, 1) return} |
當(dāng)target是數(shù)組類(lèi)型并且key是有效的數(shù)組索引值時(shí)，也是使用splice來(lái)進(jìn)行刪除操作，因?yàn)樵撟儺惙椒梢杂|發(fā)攔截操作。
|
1
2
3
4
5
6
7
8
|
const ob = (target: any).__ob__if (target._isVue || (ob && ob.vmCount)) { process.env.NODE_ENV !== 'production' && warn( 'Avoid deleting properties on a Vue instance or its root $data ' + '- just set it to null.' ) return} |
這一段if判斷也是一樣的，如果target是Vue實(shí)例或者是根數(shù)據(jù)對(duì)象，在非生產(chǎn)環(huán)境下打印警告信息。也就是不能刪除Vue實(shí)例對(duì)象的屬性，也不能刪除根數(shù)據(jù)對(duì)象的屬性，因?yàn)閐ata本身不是響應(yīng)式的。
|
1
2
3
|
if (!hasOwn(target, key)) { return} |
如果target對(duì)象上沒(méi)有key屬性，直接返回。
|
1
|
delete target[key] |
進(jìn)行到這里就說(shuō)明target是一個(gè)純對(duì)象，并且有key屬性，直接刪除該屬性。
|
1
2
3
|
if (!ob) { return} |
如果ob對(duì)象不存在，說(shuō)明target不是響應(yīng)式的，直接返回。
|
1
|
ob.dep.notify() |
如果ob對(duì)象存在，說(shuō)明target是響應(yīng)式的，觸發(fā)響應(yīng)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://www.jianshu.com/p/12d93fa59607
