摘要：執(zhí)行的時(shí)候，會(huì)綁定上下文對(duì)象為組件實(shí)例于是中的就能取到組件實(shí)例本身，的代碼塊頂層作用域就綁定為了組件實(shí)例于是內(nèi)部變量的訪問(wèn)，就會(huì)首先訪問(wèn)到組件實(shí)例上。其中的獲取，就會(huì)先從組件實(shí)例上獲取，相當(dāng)于。

寫(xiě)文章不容易，點(diǎn)個(gè)贊唄兄弟
專(zhuān)注 Vue 源碼分享，文章分為白話(huà)版和 源碼版，白話(huà)版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧
研究基于 Vue版本 【2.5.17】

如果你覺(jué)得排版難看，請(qǐng)點(diǎn)擊 下面鏈接 或者 拉到 下面關(guān)注公眾號(hào)也可以吧

【Vue原理】VModel - 白話(huà)版

說(shuō)到 Vue，感覺(jué)第一印象就是雙向綁定，所以v-model鍵值是Vue印象的半壁江山啊，這么重要的東西，你好歹要知道是怎么實(shí)現(xiàn)的吧

我們今天就來(lái)講解雙向綁定的工作原理，你應(yīng)該知道，雙向綁定就是通過(guò)綁定 dom 事件來(lái)實(shí)現(xiàn)的，可是，怎么綁定的事件，綁定什么事件？

首先，雙向綁定，我個(gè)人認(rèn)為應(yīng)該分為 初始化綁定 和 雙向更新 兩part。

初始化綁定，就是初始化時(shí)給表單元素綁定值，綁定事件，為雙向更新做準(zhǔn)備

雙向更新，就是任意一邊變化，同時(shí)能讓另一個(gè)邊更新

雙向更新那是后話(huà)，只有一開(kāi)始時(shí)成功執(zhí)行綁定操作才會(huì)有之后 雙向更新這個(gè)東西，所以，今天按順序來(lái)了解兩個(gè)part，從四個(gè)問(wèn)題開(kāi)始

1、v-model 怎么給表單綁定數(shù)據(jù)

2、v-model 綁定什么事件

3、v-model 怎么綁定事件

4、v-model 如何進(jìn)行雙向更新

TIP

v-model 還可以用在 自定義組件上，但是很明顯，這次我們先不講這一塊，而是先將正常的表單使用

我們先以 input text 類(lèi)型講解，對(duì)于其他的表單元素，流程都差不多，只是中間涉及的內(nèi)容不同。所以就先講個(gè)例子，然后具體在源碼版全部一起說(shuō)

1、怎么賦值？v-model 綁定的數(shù)據(jù)賦值給表單元素的 value 屬性

2、怎么綁定事件？解析不同表單元素，配置相應(yīng)的事件名和事件回調(diào)，在插入dom之前，addEventListener 綁定上事件

3、怎么雙綁？外部變化，觸發(fā)事件回調(diào)，event.target.value 賦值給model綁定的數(shù)據(jù)；內(nèi)部變化，修改表單元素屬性 value

看完結(jié)論，有點(diǎn)懵？我們來(lái)看看具體的內(nèi)容，結(jié)果導(dǎo)向來(lái)進(jìn)行學(xué)習(xí)

下面的講解以下面這個(gè)為例

獲取值流程

首先，上面例子解析后的渲染函數(shù)是下面這樣（已簡(jiǎn)化，只保留表單值相關(guān)）

(function(){    
    with(this){  
        return _c("div",[
            _c("input",
                domProps:{"value":name}
            )
        ])
    }
})

1、這個(gè)渲染函數(shù)是沒(méi)有執(zhí)行的 匿名函數(shù)。執(zhí)行的時(shí)候，會(huì)綁定上下文對(duì)象為 組件實(shí)例

2、于是 with(this) 中的 this 就能取到 組件實(shí)例本身，with 的代碼塊 頂層作用域 就綁定為了 組件實(shí)例

3、于是 with 內(nèi)部變量的訪問(wèn)，就會(huì)首先訪問(wèn)到 組件實(shí)例上。其中 name 的 獲取，就會(huì)先從 組件實(shí)例上獲取，相當(dāng)于 vm.name。賦值完成后，domProps 就是下面這樣

{ domProps:{value:111} }

4、上面的 value 是 v-model 解析成的原生屬性，保存在屬于該節(jié)點(diǎn) input 的 domProps 對(duì)象存儲(chǔ)器中

綁定值流程

創(chuàng)建dom input 之后，插入dom input 之前，遍歷該 input 的 domProps ，逐個(gè)添加給 input dom

簡(jiǎn)化后的代碼像下面這樣進(jìn)行賦值

for(var i in domProps){
    input[i]=domProps[i]
}

其中給節(jié)點(diǎn)賦值就是這樣

input.value = 111

不同的表單元素使用v-model，會(huì)綁定不同的 事件

change 事件

select，checkbox，radio

input 事件

這是默認(rèn)事件，當(dāng)不是上面三種表單元素時(shí)，會(huì)解析成 input 事件

比如 text、number 等 input 元素和 textarea

TIP

實(shí)際上關(guān)于 input 和 textarea 綁定的事件遠(yuǎn)不止 input 一個(gè)事件，但是涉及內(nèi)容太多，打算放在源碼版說(shuō)明，這里先簡(jiǎn)單默認(rèn)是 input 事件

上面例子解析成下面的渲染函數(shù)（已簡(jiǎn)化，只保留事件相關(guān)）

with(this) {    
    return _c("div", [
        _c("input", {        
            on: {            
              "input": function($event) {
                  name = $event.target.value
              }
            }
        }
    )])
}

解析事件流程

1解析不同表單元素，配置不同的事件

2拼裝 事件回調(diào)函數(shù)，不同表單元素，回調(diào)不一樣

3把 事件名和拼裝回調(diào) 配套 保存給相應(yīng)的表單元素的 on 事件存儲(chǔ)器

什么時(shí)候綁定事件

生成 input dom 之后，插入input dom 之前

怎么綁

使用之前保存的 事件名和 事件回調(diào)，給 input dom 像下面這樣綁定上事件

input.addEventListener("input",function($event) {    
    name = $event.target.value 
})

雙向，指的是 外部和內(nèi)部

外部變化：用戶(hù)手動(dòng)改變表單值，輸入或者選擇

內(nèi)部變化：從內(nèi)部修改綁定值

內(nèi)部變化

1、v-model 綁定了 name ，name 會(huì)收集到 本組件的 watcher

a. 下面渲染函數(shù)執(zhí)行時(shí)，會(huì)綁定本身組件實(shí)例為上下文對(duì)象

b. name 訪問(wèn)的是 組件實(shí)例的 name

c. name 此時(shí)便收集到了 當(dāng)前正在渲染的組件實(shí)例，當(dāng)前渲染的實(shí)例是自己，于是收集到了自身的 watcher

(function(){    
  with(this){  
    return _c("div",[_c("input",
        domProps:{"value":(name)})
    ])
  }
})

如果你不懂 收集 watcher 什么意思，建議看下我的另一篇文章

【Vue原理】響應(yīng)式原理 - 白話(huà)版

2、內(nèi)部修改 name 變化，通知收集器內(nèi)的 watcher 更新，所以本組件會(huì)更新，上面的渲染函數(shù)重新執(zhí)行，便 重新從實(shí)例讀取 name

3、重新給 input dom 的 value 賦值，于是 頁(yè)面就更新了

怎么賦值？那是回到第一個(gè)問(wèn)題了，兄弟

外部變化

手動(dòng)改變表單，事件觸發(fā)，執(zhí)行事件回調(diào)（下面這個(gè)），更新組件數(shù)據(jù) name

function($event) {    
    name = $event.target.value 
}

更新內(nèi)部數(shù)據(jù)流程

1、當(dāng)事件觸發(fā)的時(shí)候，會(huì)把 表單的值 賦值給 name

2、name 是從 組件實(shí)例上訪問(wèn)的

3、所以這次賦值會(huì) 直接改變組件實(shí)例的 name

回調(diào)怎么賦值給組件實(shí)例的name

一開(kāi)始不懂，所以不理解，也沒(méi)查到，寫(xiě)了個(gè)例子，大概理解了意思

1、因?yàn)槭录卣{(diào) 在 with 里面聲明

2、于是事件回調(diào)的 作用域鏈最頂層 就加上了一層 with 綁定的作用域

3、就算事件回調(diào)不在 with 中執(zhí)行，事件回調(diào)中的 變量訪問(wèn)，也會(huì)先訪問(wèn)之前 with 綁定過(guò)的作用域，因?yàn)樽饔糜蜴湹淖铐攲?/p>

with舉栗子

var name=22
var a={name:"a"}
with(a){    
    var fn=function(){        
        console.log(name)
    }
}
fn()

你認(rèn)為 fn 執(zhí)行的時(shí)候，會(huì)打印出什么呢？行了，給你看結(jié)果了

好吧，再一次深刻認(rèn)識(shí)到一個(gè)知識(shí)點(diǎn)，with 綁定作用域原來(lái)這么強(qiáng)，離開(kāi)with執(zhí)行，還是先訪問(wèn)他的作用域，脫離不出魔爪啊，強(qiáng)盜作用域

回來(lái)總結(jié)！

于是當(dāng)事件回調(diào)執(zhí)行的時(shí)候，會(huì) 直接賦值 給 組件實(shí)例的name，這樣便通過(guò)外部改變了內(nèi)部數(shù)據(jù)

TIP

外部變化，本來(lái)可能會(huì)存在一種情況

a、手動(dòng)修改表單后， 回調(diào)內(nèi)會(huì)更新組件的值

b、組件的值更新之后，會(huì)通知組件更新，組件更新時(shí)，便又會(huì)重新把input 賦值一遍

非常多余的一步操作，所以這里，Vue做一個(gè)判斷，判斷舊值和 新值是否相等，不等才更新，關(guān)于舊值，會(huì)保存在 dom 的 _value 屬性

v-model 三要素

1、綁定屬性

2、綁定事件

3、屬性+事件組合完成雙向更新