Vue響應式原理Observer

元件初始化時會執行initstate方法，主要是對 props、methods、data、computed、watcher 等屬性做了初始化操作。這裡我們分析 data

export function initstate (vm: component)  else , true /* asrootdata */)
} if (opts.computed) initcomputed(vm, opts.computed)
if (opts.watch && opts.watch !== nativewatch) 
}

function initdata (vm: component) 
if (!isplainobject(data)) 
process.env.node_env !== 'production' && warn(
'data functions should return an object:\n' +
'',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--) " has already been defined as a data property.`,vm)
}}
if (props && hasown(props, key)) " is already declared as a prop. ` +
`use prop default value instead.`,vm)
} else if (!isreserved(key)) 
} // observe data
observe(data, true /* asrootdata */)
}

initdata主要做了兩件事：

1、呼叫了proxy 把data的資料****vue例項上。

2、呼叫observer把資料變成響應式。我們重點分析observer

export function observe (value: any, asrootdata: ?boolean): observer | void

export class observer  else 
} walk (obj: object) 
}}

observer主要做了三件事：

1、給物件新增乙個__ob__的屬性；

2、給物件新增乙個dep 依賴收集器；

3、迴圈物件，呼叫definereactive，給物件每個屬性值新增響應式

export const definereactive = (
obj: object,
key: string,
val: any,
customsetter?: function,
shallow?: boolean
) => 
}return val
},set(newval) }})
}

definereactive給物件的屬性實現響應式：

1、給物件的屬性建立乙個dep依賴收集器

2、執行observer(val)，因為可能是巢狀物件

3、定義get方法，當物件的該屬性被訪問時，執行dep.depend收集器dep會收集watcher物件（觀察者）。那什麼時候會執行get方法，watcher物件又是誰呢？

4、定義set方法，當資料發生改變時，執行dep.notify派發通知，get方法收集的watcher接到通知後執行對應的操作，如果是渲染watcher則執行更新dom的操作。新的資料可能也是個物件·，所以需要執行observer(newval)，給新值新增響應式

5、大家可能有個疑問，childob.dep.depend()這裡的作用。childob是乙個observer物件，我們上面分析observer的時候，observer物件裡也有乙個dep收集器，observer會執行this.dep=new dep()，並且迴圈物件呼叫definereative。definereative已經給物件的屬性新增了dep，那observer物件裡的this.dep有什麼用呢

Vue響應式原理Observer

vue響應式布局 Vue 響應式原理

vue響應式原理

vue響應式原理

Vue響應式原理Observer

vue響應式布局 Vue 響應式原理

vue響應式原理

vue響應式原理

相關推薦