[Vue原始碼]一起來學Vue雙向繫結原理-資料劫持和釋出訂閱
有一段時間沒有更新技術博文了,因為這段時間埋下頭來看Vue原始碼了。本文我們一起通過學習雙向繫結原理來分析Vue原始碼。預計接下來會圍繞Vue原始碼來整理一些文章,如下。
- 一起來學Vue雙向繫結原理-資料劫持和釋出訂閱
- 一起來學Vue模板編譯原理(一)-Template生成AST
- 一起來學Vue模板編譯原理(二)-AST生成Render字串
- 一起來學Vue虛擬DOM解析-Virtual Dom實現和Dom-diff演算法
這些文章統一放在我的git倉庫:https://github.com/yzsunlei/javascript-series-code-analyzing。覺得有用記得star收藏。
簡單應用
我們先來看一個簡單的應用示例:
<div id="app"> <input id="input" type="text" v-model="text"> <div id="text">輸入的值為:{{text}}</div> </div> <script> var vm = new Vue({ el: '#app', data: { text: 'hello world' } }) </script>
上面的示例具有的功能就是初始時,'hello world'字串會顯示在input輸入框中和div文字中,當手動輸入值後,div文字的值也相應的改變。
我們來簡單理一下實現思路:
- 1、input輸入框以及div文字和data中的資料進行繫結
- 2、input輸入框內容變化時,data中的對應資料同步變化,即 view => model
- 3、data中資料變化時,對應的div文字內容同步變化,即 model => view
原理介紹
Vue.js是通過資料劫持以及結合釋出者-訂閱者來實現雙向繫結的,資料劫持是利用ES5的Object.defineProperty(obj, key, val)來劫持各個屬性的的setter以及getter,在資料變動時釋出訊息給訂閱者,從而觸發相應的回撥來更新檢視。
雙向資料繫結,簡單點來說分為三個部分:
- 1、Observer:觀察者,這裡的主要工作是遞迴地監聽物件上的所有屬性,在屬性值改變的時候,觸發相應的watcher。
- 2、Watcher:訂閱者,當監聽的資料值修改時,執行響應的回撥函式(Vue裡面的更新模板內容)。
- 3、Dep:訂閱管理器,連線Observer和Watcher的橋樑,每一個Observer對應一個Dep,它內部維護一個數組,儲存與該Observer相關的Watcher。
DEMO實現雙向繫結
下面我們來一步步的實現雙向資料繫結。
第一部分是Observer:
function Observer(obj, key, value) {
var dep = new Dep();
if (Object.prototype.toString.call(value) == '[object Object]') {
Object.keys(value).forEach(function(key) {
new Observer(value, key, value[key])
})
};
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function() {
if (Dep.target) {
dep.addSub(Dep.target);
};
return value;
},
set: function(newVal) {
value = newVal;
dep.notify();
}
})
}
遞迴的為物件obj的每個屬性新增getter和setter。在getter中,我們把watcher新增到dep中。在setter中,觸發watcher執行回撥。
第二部分是Watcher:
function Watcher(fn) {
this.update = function() {
Dep.target = this;
fn();
Dep.target = null;
}
this.update();
}
fn是資料變化後要執行的回撥函式,一般是獲取資料渲染模板。預設執行一遍update方法是為了在渲染模板過程中,呼叫資料物件的getter時建立兩者之間的關係。因為同一時刻只有一個watcher處於啟用狀態,把當前watcher繫結在Dep.target(方便在Observer內獲取)。回撥結束後,銷燬Dep.target。
第三部分是Dep:
function Dep() {
this.subs = [];
this.addSub = function (watcher) {
this.subs.push(watcher);
}
this.notify = function() {
this.subs.forEach(function(watcher) {
watcher.update();
});
}
}
內部一個存放watcher的陣列subs。addSub用於向陣列中新增watcher(getter時)。notify用於觸發watcher的更新(setter時)。
以上我們就完成了簡易的雙向繫結的功能,我們用一下看是不是能達到上面簡單應用同樣的效果。
<div id="app">
<input id="input" type="text" v-model="text">
<div id="text">輸入的值為:{{text}}</div>
</div>
<script type="text/javascript">
var obj = {
text: 'hello world'
}
Object.keys(obj).forEach(function(key){
new Observer(obj, key, obj[key])
});
new Watcher(function(){
document.querySelector("#text").innerHTML = "輸入的值為:" + obj.text;
})
document.querySelector("#input").addEventListener('input', function(e) {
obj.text = e.target.value;
})
</script>
當然上面這是最簡單的雙向繫結功能,Vue中還實現了對陣列、物件的雙向繫結,下面我們來看看Vue中的實現。
Vue中的雙向繫結
看Vue的實現原始碼前,我們先來看下下面這張圖,經典的Vue雙向繫結原理示意圖(圖片來自於網路):
簡單解析如下:
- 1、實現一個數據監聽器Obverser,對data中的資料進行監聽,若有變化,通知相應的訂閱者。
- 2、實現一個指令解析器Compile,對於每個元素上的指令進行解析,根據指令替換資料,更新檢視。
- 3、實現一個Watcher,用來連線Obverser和Compile, 併為每個屬性繫結相應的訂閱者,當資料發生變化時,執行相應的回撥函式,從而更新檢視。
Vue中的Observer:
首先是Observer物件,原始碼位置src/core/observer/index.js
export class Observer {
value: any;
dep: Dep;
vmCount: number;
constructor (value: any) {
this.value = value
this.dep = new Dep()
this.vmCount = 0
// 新增__ob__來標示value有對應的Observer
def(value, '__ob__', this)
if (Array.isArray(value)) { // 處理陣列
if (hasProto) { // 實現是'__proto__' in {}
protoAugment(value, arrayMethods)
} else {
copyAugment(value, arrayMethods, arrayKeys)
}
this.observeArray(value)
} else { // 處理物件
this.walk(value)
}
}
// 給物件每個屬性新增getter/setters
walk (obj: Object) {
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i]) // 重點
}
}
// 迴圈觀察陣列的每一項
observeArray (items: Array<any>) {
for (let i = 0, l = items.length; i < l; i++) {
observe(items[i]) // 重點
}
}
}
整體上,value分為物件或陣列兩種情況來處理。這裡我們先來看看defineReactive和observe這兩個比較重要的函式。
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
// 儲存物件屬性上自有的getter和setter
const getter = property && property.get
const setter = property && property.set
// 如果屬性上之前沒有定義getter,並且沒有傳入初始val值,就把屬性原有的值賦值給val
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 () {
// 給屬性設定getter
const value = getter ? getter.call(obj) : val
if (Dep.target) {
// 給每個屬性建立一個dep
dep.depend()
if (childOb) {
childOb.dep.depend()
// 如果是陣列,就遞迴建立
if (Array.isArray(value)) {
dependArray(value)
}
}
}
return value
},
set: function reactiveSetter (newVal) {
// 給屬性設定setter
const value = getter ? getter.call(obj) : val
// 值未變化,就跳過
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
if (process.env.NODE_ENV !== 'production' && customSetter) {
customSetter() // 非生產環境自定義除錯用,這裡忽略
}
if (getter && !setter) return
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
childOb = !shallow && observe(newVal)
// 值發生變化進行通知
dep.notify()
}
})
}
defineReactive這個方法裡面,是具體的為物件的屬性新增getter、setter的地方。它會為每個值建立一個dep,如果使用者為這個值傳入getter和setter,則暫時儲存。之後通過Object.defineProperty,重新新增裝飾器。在getter中,dep.depend其實做了兩件事,一是向Dep.target內部的deps新增dep,二是將Dep.target新增到dep內部的subs,也就是建立它們之間的聯絡。在setter中,如果新舊值相同,直接返回,不同則呼叫dep.notify來更新與之相關的watcher。
export function observe (value: any, asRootData: ?boolean): Observer | void {
// 如果不是物件就跳過
if (!isObject(value) || value instanceof VNode) {
return
}
let ob: Observer | void
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
// 如果已有observer,就直接返回,上面講到過會用`__ob__`屬性來記錄
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
}
observe
這個方法用於觀察一個物件,返回與物件相關的Observer物件,如果沒有則為value建立一個對應的Observer。
好的,我們再回到Observer,如果傳入的是物件,我們就呼叫walk,該方法就是遍歷物件,對每個值執行defineReactive。
對於傳入的物件是陣列的情況,其實會有一些特殊的處理,因為陣列本身只引用了一個地址,所以對陣列進行push、splice、sort等操作,我們是無法監聽的。所以,Vue中改寫value的__proto__(如果有),或在value上重新定義這些方法。augment在環境支援__proto__時是protoAugment,不支援時是copyAugment。
// augment在環境支援__proto__時
function protoAugment (target, src: Object) {
target.__proto__ = src
}
// augment在環境不支援__proto__時
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])
}
}
augment
在環境支援__proto__
時,就很簡單,呼叫protoAugment
其實就是執行了value.__proto__ = arrayMethods
。augment
在環境支援__proto__
時,呼叫copyAugment
中迴圈把arrayMethods
上的arrayKeys
方法新增到value
上。
那這裡我們就要看看arrayMethods
方法了。arrayMethods
其實是改寫了陣列方法的新物件。arrayKeys
是arrayMethods
中的方法列表。
const arrayProto = 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) {
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
}
// 是push、unshift、splice時,重新觀察陣列,因為這三個方法都是像陣列中新增新的元素
if (inserted) ob.observeArray(inserted)
// 通知變化
ob.dep.notify()
return result
})
})
實際上還是呼叫陣列相應的方法來操作value,只不過操作之後,添加了相關watcher的更新。呼叫push
、unshift
、splice
三個方法引數大於2時,要重新呼叫ob.observeArray,因為這三種情況都是像陣列中新增新的元素,所以需要重新觀察每個子元素。最後在通知變化。
Vue中的Observer就講到這裡了。實際上還有兩個函式set
、del
沒有講解,其實就是在新增或刪除陣列元素、物件屬性時進行getter、setter的繫結以及通知變化,具體可以去看原始碼。
Vue中的Dep:
看完Vue中的Observer,然後我們來看看Vue中Dep,原始碼位置:src/core/observer/dep.js
。
let uid = 0
export default class Dep {
static target: ?Watcher;
id: number;
subs: Array<Watcher>;
constructor () {
this.id = uid++
this.subs = []
}
// 新增訂閱者
addSub (sub: Watcher) {
this.subs.push(sub)
}
// 移除訂閱者
removeSub (sub: Watcher) {
remove(this.subs, sub)
}
// 新增到訂閱管理器
depend () {
if (Dep.target) {
Dep.target.addDep(this)
}
}
// 通知變化
notify () {
const subs = this.subs.slice()
if (process.env.NODE_ENV !== 'production' && !config.async) {
subs.sort((a, b) => a.id - b.id)
}
// 遍歷所有的訂閱者,通知更新
for (let i = 0, l = subs.length; i < l; i++) {
subs[i].update()
}
}
}
Dep類就比較簡單,內部有一個id和一個subs,id用於作為dep物件的唯一標識,subs就是儲存watcher的陣列。相比於上面我們自己實現的demo應用,這裡多了removeSub和depend。removeSub是從陣列中移除某個watcher,depend是呼叫了watcher的addDep。
好,Vue中的Dep只能說這麼多了。
Vue中的Watcher:
最後我們再來看看Vue中的Watcher,原始碼位置:src/core/observer/watcher.js
。
// 注,我刪除了原始碼中一些不太重要或與雙向繫結關係不太大的邏輯,刪除的程式碼用// ... 表示
let uid = 0
export default class Watcher {
vm: Component;
expression: string;
cb: Function;
id: number;
deep: boolean;
user: boolean;
lazy: boolean;
sync: boolean;
dirty: boolean;
active: boolean;
deps: Array<Dep>;
newDeps: Array<Dep>;
depIds: SimpleSet;
newDepIds: SimpleSet;
before: ?Function;
getter: Function;
value: any;
constructor (
vm: Component,
expOrFn: string | Function,
cb: Function,
options?: ?Object,
isRenderWatcher?: boolean
) {
this.vm = vm
if (isRenderWatcher) {
vm._watcher = this
}
vm._watchers.push(this)
// ...
this.cb = cb
this.id = ++uid
// ...
this.expression = process.env.NODE_ENV !== 'production'
? expOrFn.toString()
: ''
if (typeof expOrFn === 'function') {
this.getter = expOrFn
} else {
this.getter = parsePath(expOrFn)
if (!this.getter) {
this.getter = noop
process.env.NODE_ENV !== 'production' && warn(
`Failed watching path: "${expOrFn}" ` +
'Watcher only accepts simple dot-delimited paths. ' +
'For full control, use a function instead.',
vm
)
}
}
this.value = this.lazy
? undefined
: this.get()
}
get () {
pushTarget(this)
let value
const vm = this.vm
// ...
if (this.deep) {
traverse(value)
}
popTarget()
this.cleanupDeps()
return value
}
addDep (dep: Dep) {
const id = dep.id
if (!this.newDepIds.has(id)) {
this.newDepIds.add(id)
this.newDeps.push(dep)
if (!this.depIds.has(id)) {
dep.addSub(this)
}
}
}
cleanupDeps () {
// ...
}
update () {
// 更新三種模式吧,lazy延遲更新,sync同步更新直接執行,預設非同步更新新增到處理佇列
if (this.lazy) {
this.dirty = true
} else if (this.sync) {
this.run()
} else {
queueWatcher(this)
}
}
run () {
// 觸發更新,在這裡呼叫cb函式
if (this.active) {
const value = this.get()
if (
value !== this.value ||
isObject(value) ||
this.deep
) {
const oldValue = this.value
this.value = value
if (this.user) {
try {
this.cb.call(this.vm, value, oldValue)
} catch (e) {
handleError(e, this.vm, `callback for watcher "${this.expression}"`)
}
} else {
this.cb.call(this.vm, value, oldValue)
}
}
}
}
evaluate () {
// ...
}
depend () {
let i = this.deps.length
while (i--) {
this.deps[i].depend()
}
}
teardown () {
// ...
}
}
建立Watcher物件時,有兩個比較重要的引數,一個是expOrFn,一個是cb。
在Watcher建立時,會呼叫this.get,裡面會執行根據expOrFn解析出來的getter。在這個getter中,我們或渲染頁面,或獲取某個資料的值。總之,會呼叫相關data的getter,來建立資料的雙向繫結。
當相關的資料改變時,會呼叫watcher的update方法,進而呼叫run方法。我們看到,run中還會呼叫this.get來獲取修改之後的value值。
其實Watcher有兩種主要用途:一種是更新模板,另一種就是監聽某個值的變化。
模板更新的情況:在Vue宣告週期掛載元素時,我們是通過建立Watcher物件,然後呼叫updateComponent來更新渲染模板的。
vm._watcher = new Watcher(vm, updateComponent, noop)
在建立Watcher會呼叫this.get,也就是這裡的updateComponent。在render的過程中,會呼叫data的getter方法,以此來建立資料的雙向繫結,當資料改變時,會重新觸發updateComponent。
資料監聽的情況:另一個用途就是我們的computed、watch等,即監聽資料的變化來執行響應的操作。此時this.get返回的是要監聽資料的值。初始化過程中,呼叫this.get會拿到初始值儲存為this.value,監聽的資料改變後,會再次呼叫this.get並拿到修改之後的值,將舊值和新值傳給cb並執行響應的回撥。
好,Vue中的Watcher就說這麼多了。其實上面註釋的程式碼中還有cleanupDeps
清除依賴邏輯、teardown
銷燬Watcher邏輯等,留給大家自己去看原始碼吧。
總結一下
Vue中雙向繫結,簡單來說就是Observer、Watcher、Dep三部分。下面我們再梳理一下整個過程:
首先我們為每個vue屬性用Object.defineProperty()實現資料劫持,為每個屬性分配一個訂閱者集合的管理陣列dep;
然後在編譯的時候在該屬性的陣列dep中新增訂閱者,Vue中的v-model會新增一個訂閱者,{{}}也會,v-bind也會;
最後修改值就會為該屬性賦值,觸發該屬性的set方法,在set方法內通知訂閱者陣列dep,訂閱者陣列迴圈呼叫各訂閱者的update方法更新檢視。