數(shù)據(jù)綁定
一旦更新了data中的某個(gè)屬性數(shù)據(jù),所有界面上直接使用或間接使用了此屬性的節(jié)點(diǎn)都會(huì)更新焕襟。
數(shù)據(jù)劫持
在Vue中是使用數(shù)據(jù)劫持的技術(shù)來(lái)實(shí)現(xiàn)數(shù)據(jù)綁定的效果。
基本思想:通過(guò)definePropety()來(lái)監(jiān)視data中所有屬性(任意層次)數(shù)據(jù)的變化,一旦變化就去更新界面庵楷。(給data中的屬性提供set方法)
Dep
- 它的實(shí)例什么時(shí)候創(chuàng)建?
初始化的給data的屬性進(jìn)行數(shù)據(jù)劫持(給data的屬性進(jìn)行響應(yīng)式)時(shí)創(chuàng)建的楣颠。 - 創(chuàng)建個(gè)數(shù)尽纽?
與data中的屬性一一對(duì)應(yīng)。 - Dep的結(jié)構(gòu)童漩?
id:標(biāo)識(shí)
subs:[] n個(gè)相關(guān)的watcher的容器
Watcher
- 它的實(shí)例什么時(shí)候創(chuàng)建弄贿?
初始化的解析大括號(hào)表達(dá)式/一般指令時(shí)創(chuàng)建。 - 創(chuàng)建個(gè)數(shù)矫膨?
與模板中表達(dá)式(不包含事件指令)一一對(duì)應(yīng)差凹。 - Watcher的結(jié)構(gòu)期奔?
this.cb = cb //用于更新界面的回調(diào)
this.vm = vm //vm實(shí)例
this.exp = exp //對(duì)應(yīng)的表達(dá)式
this.depIds = {} //相關(guān)的n個(gè)dep的容器對(duì)象
this.value = this.get() //當(dāng)前表達(dá)式對(duì)應(yīng)的value
Dep與Watcher之間的關(guān)系
- 什么關(guān)系?
多對(duì)多的關(guān)系
比如:
一個(gè)data里的屬性 ==》對(duì)應(yīng)一個(gè)Dep ==》對(duì)應(yīng)n個(gè)watcher(什么時(shí)候n是大于1的危尿?模板中有多個(gè)表達(dá)式使用了此屬性呐萌。比如:{{a}}/v-text='a')
一個(gè)表達(dá)式 ==》對(duì)應(yīng)一個(gè)watcher ==》對(duì)應(yīng)n個(gè)Dep(多層表達(dá)式會(huì)產(chǎn)生多個(gè)Dep)。比如{{a.b.c}}在模板中只用了一次 ==》對(duì)應(yīng)一個(gè)watcher ==》對(duì)應(yīng)了3個(gè)Dep - 如何建立的谊娇?
data中屬性的get()中建立 - 什么時(shí)候建立肺孤?
初始化的解析模板中的表達(dá)式時(shí)創(chuàng)建watcher對(duì)象。Dep先創(chuàng)建watcher后創(chuàng)建
例如:
vm.name = 'abc' ==> data中的name屬性值變化 ==> name的set()就會(huì)調(diào)用 ==> 通知dep ==> 通知dep中subs中所有相關(guān)的watcher ==>調(diào)用watcher中的更新界面的回調(diào)函數(shù)cb ==>updater