初始化資料initdata時呼叫obsreve函式。
observe函式主要做了3件事：
如果不是物件則啥都不做退出。
物件已經是響應式的了，有__ob__了，直接返回這個依賴收集器。
物件還不是響應式的，執行new observer()。
observer中主要做了3件事：
新建乙個new dep()依賴收集器,定義到obj.__ob__上。
如果是對陣列，修改陣列原型，遍歷陣列，如果不是物件則退出，是物件則繼續呼叫observe。
如果是物件，則對物件遍歷將物件中的屬性變為響應式的，呼叫definereactive
definereactive主要做了：
對物件值val繼續執行observeget中進行依賴收集dep.depend()set中如果新增了新值則執行observeset中進行派發更新dep.notify()
class
observer
else
}walk
(obj: object)
}observearray
(items: array)}
}export
function
observe
(value)
let ob
//如果已經有依賴收集器了（**省略）：直接賦值
ob = value.__ob__
//如果沒有依賴收集器（**省略）：新建new dep()
ob =
newobserver
(value)
return ob
}//定義乙個響應式屬性在物件上
export
function
definereactive
(obj,key,val)
,set
:function
reactivesetter
(newval)})
}
const result = original.
(this
, args)
//執行原始的陣列方法
更新檢視流程：
set
->
dep.
notify()
->
subs[i]
.update()
->
watcher.
run()||
queuewatcher
(this)-
>
watcher.
get(
)|| watcher.cb -
>
watcher.
getter()
->
vm._update()
->
vm.__patch__
()
class
depaddsub
(sub: watcher)
removesub
(sub: watcher)
depend()
}notify()
}}dep.target =
null
//watcher中使用
export
function
pushtarget
(target:
?watcher)
export
function
poptarget()
class
watcher
/** * evaluate the getter, and re-collect dependencies.
*/get(
)/**
* add a dependency to this directive.
*/adddep
(dep: dep)}}
/** * depend on all deps collected by this watcher.
*/depend()
}}
vue.js原始碼 - 剖析observer,dep,watch三者關係 如何具體的實現資料雙向綁 Vue 響應式原理 原始碼
整個函式結束，相當於初始化所有屬性和vue內建事件 如 emit 並且使所有屬性變為響應式。初始化所有option api 對其中的使用者自定義資料data 進行 observe 此函式用來新建乙個類observer的例項，類observer的constructor中用walk 函式進行遍歷每個屬性...
Vue原始碼剖析（二）響應式
主要是雙向繫結和依賴收集 object.defineproperty，vue.js就是基於它實現 響應式系統 的。我們知道要實現雙向繫結需要給物件通過object.defineproperty新增getter和setter方法。那我們是怎麼來設定vue的呢，我們可以實現乙個observer函式，我們...
vue原始碼學習 響應式資料
vue原始碼學習 初始化data vue原始碼學習 響應式資料 在 vue原始碼學習 初始化data 一文中，知道了在new vue 時做了一系列初始化操作，其中在初始化data資料時，利用observe data,true 方法，對資料屬性進行了觀察。下面來具體看下是如何對data進行的觀察,從而...