之前也用了一段時間Vue，對其用法也較為熟練了，但是對各種用法和各種api使用都是隻知其然而不知其所以然。最近利用空閒時間嘗試的去看看Vue的原始碼，以便更瞭解其具體原理實現，跟著學習學習。
Proxy 對 data 代理
傳的 data 進去的為什麼可以用this.xxx訪問，而不需要 this.data.xxx 呢?
// vue\src\core\instance\state.js
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)
}
function initData (vm: Component) {
let data = vm.$options.data
//...
const keys = Object.keys(data)
//...
let i = keys.length
while (i--) {
const key = keys[i]
//....
proxy(vm, `_data`, key)
}
observe(data, true /* asRootData */)
}
這段程式碼看起來還是很簡單的，將 data 中得 key 遍歷一遍，然後全部新增到例項上去，當我們訪問修改 this.xxx 得時候，都是在訪問修改 this._data.xxx
observer 模組
模組原始碼路徑 vue\src\core\observer
observer 模組可以說是 Vue 響應式得核心了，observer 模組主要是 Observer、Dep、Watcher這三個部分了
- Observer 觀察者，對資料進行觀察和依賴收集等
- Dep 是 Observer 和 Watcher 得一個橋樑，Observer 對資料進行響應式處理時候，會給每個屬性生成一個 Dep 物件，然後通過呼叫 dep.depend() ，如果當前存在 Watcher 將當前 Dep 加入到 Watcher 中,然後在將 Watcher 新增到當前 Dep 中
- Watcher 訂閱者，資料變化會收到通知，然後進行相關操作，例如檢視更新等
關係如下
-------get 收集依賴-------- ----------- 訂閱 -------------
| | | |
| V | |
------------ ------------ -------------
| Obserser | ---- set ---->| Dep |------- 通知 ---->| Watcher |
------------ ------------ -------------
|
update
|
-------------
| View |
-------------
1.Observer
initData() 方法呼叫了 observe(data, true /* asRootData */) 先來看下這個方法
//對value 進行觀察處理
export function observe (value: any, asRootData: ?boolean): Observer | void {
//判斷處理 value 必須是物件 並且不能是 VNode
if (!isObject(value) || value instanceof VNode) {
return
}
let ob: Observer | void
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
}
如果 data.__ob__ 已經存在直接返回，否則new一個新的 Observer 例項，下面是 Observer 類程式碼
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
// 這個dep 在 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 (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（data）增加 __ob__ (當前 Observer例項 ) 屬性。如果 value 是陣列，會呼叫 observeArray 對陣列進行遍歷，在呼叫 observe 方法對每個元素進行觀察。如果是物件，呼叫 walk 遍歷 value 去呼叫 defineReactive 去修改屬性的 get/set。
//defineReactive 函式
export function defineReactive (
obj: Object,
key: string, //遍歷的key
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]
}
//如果 key 的值是 物件 的話，對其 value 也會進行響應處理
let childOb = !shallow && observe(val)
//為當前 key 新增get/set
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
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
},
set: function reactiveSetter (newVal) {
const value = getter ? getter.call(obj) : val
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
if (getter && !setter) return
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
//對新值 進行觀察處理
childOb = !shallow && observe(newVal)
//通知 Watcher
dep.notify()
}
})
}
function dependArray (value: Array<any>) {
for (let e, i = 0, l = value.length; i < l; i++) {
e = value[i]
e && e.__ob__ && e.__ob__.dep.depend()
if (Array.isArray(e)) {
dependArray(e)
}
}
}
上面有兩個地方有存在 Dep
- 一個是Observer 類 屬性上有個Dep,這裡主要是對陣列（陣列沒有get/set不能像物件屬性那樣）和物件本身進行依賴收集和通知
- 一個是對屬性get/set處理時候的Dep,這個主要是物件的屬性進行依賴收集和通知
2.Dep
Dep 是 Observer 與 Watcher 橋樑，也可以認為Dep是服務於Observer的訂閱系統。Watcher訂閱某個Observer的Dep，當Observer觀察的資料發生變化時，通過Dep通知各個已經訂閱的Watcher。
export default class Dep {
static target: ?Watcher;
id: number;
subs: Array<Watcher>;
constructor () {
this.id = uid++
this.subs = [] //Watcher例項
}
//接收的引數為Watcher例項，並把Watcher例項存入記錄依賴的陣列中
addSub (sub: Watcher) {
this.subs.push(sub)
}
//與addSub對應，作用是將Watcher例項從記錄依賴的陣列中移除
removeSub (sub: Watcher) {
remove(this.subs, sub)
}
//依賴收集
depend () {
if (Dep.target) { //存放當前Wather例項
//將當前 Dep 存放到 Watcher（觀察者） 中的依賴中
Dep.target.addDep(this)
}
}
//通知依賴陣列中所有的watcher進行更新操作
notify () {
const subs = this.subs.slice()
for (let i = 0, l = subs.length; i < l; i++) {
subs[i].update()
}
}
}
Dep.target = null
const targetStack = []
export function pushTarget (target: ?Watcher) {
targetStack.push(target)
Dep.target = target
}
export function popTarget () {
targetStack.pop()
Dep.target = targetStack[targetStack.length - 1]
}
3.Watcher
先看 Watcher 的建構函式
constructor(
vm: Component,
expOrFn: string | Function,
cb: Function,
options?: ?Object,
isRenderWatcher?: boolean)
{
...
if (typeof expOrFn === 'function') {
this.getter = expOrFn
} else {
this.getter = parsePath(expOrFn)
if (!this.getter) {
this.getter = noop
}
}
this.value = this.lazy
? undefined
: this.get()
}
expOrFn，對於初始化用來渲染檢視的 watcher 來說，就是render方法，對於computed來說就是表示式，對於watch才是key，而getter方法是用來取value的。最後呼叫了get()方法
get () {
//將Dep.target設定為當前watcher例項
pushTarget(this)
let value
const vm = this.vm
try {
// 執行一次get 收集依賴
value = this.getter.call(vm, vm)
} catch (e) {
if (this.user) {
handleError(e, vm, `getter for watcher "${this.expression}"`)
} else {
throw e
}
} finally {
if (this.deep) {
traverse(value)
}
popTarget()
this.cleanupDeps() //清楚依賴
}
return value
}
假如當前Watcher例項中 getter 是 render，當render遇到模板中的{{xxx}}表示式的時候，就是去讀取 data.xxx，這個時候就觸發 data.xxx 的 get方法，這個時候 get 中會執行Dep.depend(),而此時 Dep.target 就是當前 watcher ，然後呼叫 watcher.addDep()。也就將data.xxx 與 當前watcher 關聯起來了
//watcher 的其他方法
//接收引數dep(Dep例項)，讓當前watcher訂閱dep
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)) {
//將watcher例項 也新增到 Dep例項中
dep.addSub(this)
}
}
}
//清楚對dep的訂閱資訊
cleanupDeps () {
}
//立刻執行watcher或者將watcher加入佇列中
update () {
if (this.lazy) {
this.dirty = true
} else if (this.sync) {
this.run()
} else {
queueWatcher(this)
}
}
//執行watcher，呼叫this.get()求值，然後觸發回撥
run () {
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)
}
}
}
}
//呼叫this.get()求值
evaluate () {
this.value = this.get()
this.dirty = false
}
//遍歷this.deps，讓當前watcher例項訂閱所有dep
depend () {
let i = this.deps.length
while (i--) {
this.deps[i].depend()
}
}
//去除當前watcher例項所有的訂閱
teardown () {
if (this.active) {
if (!this.vm._isBeingDestroyed) {
remove(this.vm._watchers, this)
}
let i = this.deps.length
while (i--) {
this.deps[i].removeSub(this)
}
this.active = false
}
}