【Vue原理】VModel - 白話版

keke 發(fā)布于2019-08-23 18:25 / 820人閱讀

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

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

如果你覺得排版難看，請點擊 下面鏈接 或者拉到下面關(guān)注公眾號也可以吧

【Vue原理】VModel - 白話版

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

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

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

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

雙向更新，就是任意一邊變化，同時能讓另一個邊更新

雙向更新那是后話，只有一開始時成功執(zhí)行綁定操作才會有之后雙向更新這個東西，所以，今天按順序來了解兩個part，從四個問題開始

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

2、v-model 綁定什么事件

3、v-model 怎么綁定事件

4、v-model 如何進行雙向更新

TIP

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

先看結(jié)論

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

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é)論，有點懵？我們來看看具體的內(nèi)容，結(jié)果導(dǎo)向來進行學(xué)習(xí)

下面的講解以下面這個為例

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

獲取值流程

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

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

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

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

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

{ domProps:{value:111} }

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

綁定值流程

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

簡化后的代碼像下面這樣進行賦值

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

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

input.value = 111

v-model 綁定什么事件

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

change 事件

select，checkbox，radio

input 事件

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

比如 text、number 等 input 元素和 textarea

TIP

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

v-model 怎么綁定事件

上面例子解析成下面的渲染函數(shù)（已簡化，只保留事件相關(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 事件存儲器

什么時候綁定事件

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

怎么綁

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

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

v-model 如何進行雙向更新

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

外部變化：用戶手動改變表單值，輸入或者選擇

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

內(nèi)部變化

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

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

b. name 訪問的是組件實例的 name

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

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

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

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

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

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

怎么賦值？那是回到第一個問題了，兄弟

外部變化

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

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

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

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

2、name 是從組件實例上訪問的

3、所以這次賦值會直接改變組件實例的 name

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

一開始不懂，所以不理解，也沒查到，寫了個例子，大概理解了意思

1、因為事件回調(diào) 在 with 里面聲明

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

3、就算事件回調(diào)不在 with 中執(zhí)行，事件回調(diào)中的變量訪問，也會先訪問之前 with 綁定過的作用域，因為作用域鏈的最頂層

with舉栗子

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

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

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

回來總結(jié)！

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

TIP

外部變化，本來可能會存在一種情況

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

b、組件的值更新之后，會通知組件更新，組件更新時，便又會重新把input 賦值一遍

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

總結(jié)

v-model 三要素

1、綁定屬性

2、綁定事件

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

GPU云服務(wù)器云服務(wù)器 vue安卓版 VModel 白話白話云計算

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105204.html

發(fā)表評論

登陸后可評論

0條評論

keke

男|高級講師

我要關(guān)注我要私信

TA的文章

用Python爬取了幾千條相親文案，終于發(fā)現(xiàn)了告別單身的秘密

閱讀 3255·2021-11-11 16:55
Burp+夜神模擬器app抓包(一次成功)

閱讀 2567·2021-10-13 09:39
工信部召開行政指導(dǎo)會，要求阿里、騰訊等企業(yè)限期解除對鏈接的屏蔽

閱讀 2467·2021-09-13 10:27
Angular2 控制視圖的封裝模式

閱讀 2181·2019-08-30 15:55
HTML CSS + DIV實現(xiàn)排版布局

閱讀 3106·2019-08-30 15:54
前端每日實戰(zhàn)：121# 視頻演示如何用 CSS 和 D3 創(chuàng)作一個小魚游動的交互動畫

閱讀 3154·2019-08-29 16:34
a標(biāo)簽樣式繼承的問題

閱讀 1848·2019-08-29 12:41
14天入門JavaScript-day three

閱讀 1087·2019-08-29 11:33

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

【Vue原理】VModel - 白話版

相關(guān)文章

**【Vue原理】VModel - 源碼版之 select 詳解**

**【Vue原理】VModel - 源碼版之input詳解**

**【Vue原理】VModel - 源碼版之表單元素綁定流程**

**【Vue原理】Compile - 源碼版之 generate 節(jié)點數(shù)據(jù)拼接**

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

發(fā)表評論

0條評論

keke

男|高級講師

TA的文章

用Python爬取了幾千條相親文案，終于發(fā)現(xiàn)了告別單身的秘密

Burp+夜神模擬器app抓包(一次成功)

工信部召開行政指導(dǎo)會，要求阿里、騰訊等企業(yè)限期解除對鏈接的屏蔽

Angular2 控制視圖的封裝模式

HTML CSS + DIV實現(xiàn)排版布局

前端每日實戰(zhàn)：121# 視頻演示如何用 CSS 和 D3 創(chuàng)作一個小魚游動的交互動畫

a標(biāo)簽樣式繼承的問題

14天入門JavaScript-day three

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

【Vue原理】VModel - 白話版

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！