雙向數據綁定這個概念或者大家並不陌生,視圖影響數據,數據同樣影響視圖,兩者間有雙向依賴的關係。在響應式系統構建的上,中,下篇我已經對數據影響視圖的原理詳細闡述清楚了。而如何完成視圖影響數據這一關聯?這就是本節討論的重點:指令
v-model
。
一: 表單綁定
1 - 基礎使用
v-model
和表單脫離不了關係,之所以視圖能影響數據,本質上這個視圖需要可交互的,因此表單是實現這一交互的前提。表單的使用以<input > <textarea> <select>
爲核心,更細的劃分結合v-model
的使用如下:
// 普通輸入框
<input type="text" v-model="value1">
// 多行文本框
<textarea v-model="value2" cols="30" rows="10"></textarea>
// 單選框
<div class="group">
<input type="radio" value="one" v-model="value3"> one
<input type="radio" value="two" v-model="value3"> two
</div>
// 原生單選框的寫法 注:原生單選框的寫法需要通過name綁定一組單選,兩個radio的name屬性相同,才能表現爲互斥
<div class="group">
<input type="radio" name="number" value="one">one
<input type="radio" name="number" value="two">two
</div>
// 多選框 (原始值: value4: [])
<div class="group">
<input type="checkbox" value="jack" v-model="value4">jack
<input type="checkbox" value="lili" v-model="value4">lili
</div>
// 下拉選項
<select name="" id="" v-model="value5">
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="bear">bear</option>
</select>
接下來的分析,我們以普通輸入框爲例
<div id="app">
<input type="text" v-model="value1">
</div>
new Vue({
el: '#app',
data() {
return {
value1: ''
}
}
})
我們先回顧一下模板到真實節點的過程。
- 模板解析成
AST
樹; AST
樹生成可執行的render
函數;render
函數轉換爲Vnode
對象;- 根據
Vnode
對象生成真實的Dom
節點。
接下來,我們先看看模板解析爲AST
樹的過程。
2 - AST樹的解析
模板的編譯階段,會調用var ast = parse(template.trim(), options)
生成AST
樹,parse
函數的其他細節這裏不展開分析,前面的文章或多或少都涉及過,我們還是把關注點放在模板屬性上的解析,也就是processAttrs
函數上。
使用過vue
寫模板的都知道,vue
模板屬性由兩部分組成,一部分是指令,另一部分是普通html
標籤屬性。z這也是屬性處理的兩大分支。而在指令的細分領域,又將v-on,v-bind
做特殊的處理,其他的普通分支會執行addDirective
過程。
// 處理模板屬性
function processAttrs(el) {
var list = el.attrsList;
var i, l, name, rawName, value, modifiers, syncGen, isDynamic;
for (i = 0, l = list.length; i < l; i++) {
name = rawName = list[i].name; // v-on:click
value = list[i].value; // doThis
if (dirRE.test(name)) { // 1.針對指令的屬性處理
···
if (bindRE.test(name)) { // v-bind分支
···
} else if(onRE.test(name)) { // v-on分支
···
} else { // 除了v-bind,v-on之外的普通指令
···
// 普通指令會在AST樹上添加directives屬性
addDirective(el, name, rawName, value, arg, isDynamic, modifiers, list[i]);
if (name === 'model') {
checkForAliasModel(el, value);
}
}
} else {
// 2. 普通html標籤屬性
}
}
}
普通指令會在AST
樹上添加directives
屬性,具體看addDirective
函數。
// 添加directives屬性
function addDirective (el,name,rawName,value,arg,isDynamicArg,modifiers,range) {
(el.directives || (el.directives = [])).push(rangeSetItem({
name: name,
rawName: rawName,
value: value,
arg: arg,
isDynamicArg: isDynamicArg,
modifiers: modifiers
}, range));
el.plain = false;
}
最終AST
樹多了一個屬性對象,其中modifiers
代表模板中添加的修飾符,如:.lazy, .number, .trim
。
// AST
{
directives: {
{
rawName: 'v-model',
value: 'value',
name: 'v-model',
modifiers: undefined
}
}
}
3 - render函數生成
render
函數生成階段,也就是前面分析了數次的generate
邏輯,其中genData
會對模板的諸多屬性進行處理,最終返回拼接好的字符串模板,而對指令的處理會進入genDirectives
流程。
function genData(el, state) {
var data = '{';
// 指令的處理
var dirs = genDirectives(el, state);
··· // 其他屬性,指令的處理
// 針對組件的v-model處理,放到後面分析
if (el.model) {
data += "model:{value:" + (el.model.value) + ",callback:" + (el.model.callback) + ",expression:" + (el.model.expression) + "},";
}
return data
}
genDirectives
邏輯並不複雜,他會拿到之前AST
樹中保留的directives
對象,並遍歷解析指令對象,最終以'directives:['
包裹的字符串返回。
// directives render字符串的生成
function genDirectives (el, state) {
// 拿到指令對象
var dirs = el.directives;
if (!dirs) { return }
// 字符串拼接
var res = 'directives:[';
var hasRuntime = false;
var i, l, dir, needRuntime;
for (i = 0, l = dirs.length; i < l; i++) {
dir = dirs[i];
needRuntime = true;
// 對指令ast樹的重新處理
var gen = state.directives[dir.name];
if (gen) {
// compile-time directive that manipulates AST.
// returns true if it also needs a runtime counterpart.
needRuntime = !!gen(el, dir, state.warn);
}
if (needRuntime) {
hasRuntime = true;
res += "{name:\"" + (dir.name) + "\",rawName:\"" + (dir.rawName) + "\"" + (dir.value ? (",value:(" + (dir.value) + "),expression:" + (JSON.stringify(dir.value))) : '') + (dir.arg ? (",arg:" + (dir.isDynamicArg ? dir.arg : ("\"" + (dir.arg) + "\""))) : '') + (dir.modifiers ? (",modifiers:" + (JSON.stringify(dir.modifiers))) : '') + "},";
}
}
if (hasRuntime) {
return res.slice(0, -1) + ']'
}
}
這裏有一句關鍵的代碼var gen = state.directives[dir.name]
,爲了瞭解其來龍去脈,我們回到Vue源碼中的編譯流程,在以往的文章中,我們完整的介紹過template
模板的編譯流程,這一部分的設計是非常複雜且巧妙的,其中大量運用了偏函數的思想,即分離了不同平臺不同的編譯過程,也爲同一個平臺每次提供相同的配置選項進行了合併處理,並很好的將配置進行了緩存。其中針對瀏覽器端有三個重要的指令選項。
var directive$1 = {
model: model,
text: text,
html, html
}
var baseOptions = {
···
// 指令選項
directives: directives$1,
};
// 編譯時傳入選項配置
createCompiler(baseOptions)
而這個state.directives['model']
也就是對應的model
函數,所以我們先把焦點聚焦在model
函數的邏輯。
function model (el,dir,_warn) {
warn$1 = _warn;
// 綁定的值
var value = dir.value;
var modifiers = dir.modifiers;
var tag = el.tag;
var type = el.attrsMap.type;
{
// 這裏遇到type是file的html,如果還使用雙向綁定會報出警告。
// 因爲File inputs是隻讀的
if (tag === 'input' && type === 'file') {
warn$1(
"<" + (el.tag) + " v-model=\"" + value + "\" type=\"file\">:\n" +
"File inputs are read only. Use a v-on:change listener instead.",
el.rawAttrsMap['v-model']
);
}
}
//組件上v-model的處理
if (el.component) {
genComponentModel(el, value, modifiers);
// component v-model doesn't need extra runtime
return false
} else if (tag === 'select') {
// select表單
genSelect(el, value, modifiers);
} else if (tag === 'input' && type === 'checkbox') {
// checkbox表單
genCheckboxModel(el, value, modifiers);
} else if (tag === 'input' && type === 'radio') {
// radio表單
genRadioModel(el, value, modifiers);
} else if (tag === 'input' || tag === 'textarea') {
// 普通input,如 text, textarea
genDefaultModel(el, value, modifiers);
} else if (!config.isReservedTag(tag)) {
genComponentModel(el, value, modifiers);
// component v-model doesn't need extra runtime
return false
} else {
// 如果不是表單使用v-model,同樣會報出警告,雙向綁定只針對表單控件。
warn$1(
"<" + (el.tag) + " v-model=\"" + value + "\">: " +
"v-model is not supported on this element type. " +
'If you are working with contenteditable, it\'s recommended to ' +
'wrap a library dedicated for that purpose inside a custom component.',
el.rawAttrsMap['v-model']
);
}
// ensure runtime directive metadata
//
return true
}
顯然,model
會對錶單控件的AST
樹做進一步的處理,在上面的基礎用法中,我們知道表單有不同的類型,每種類型對應的事件處理響應機制也不同。因此我們需要針對不同的表單控件生成不同的render
函數,因此需要產生不同的AST
屬性。model
針對不同類型的表單控件有不同的處理分支。我們重點分析普通input
標籤的處理,genDefaultModel
分支,其他類型的分支,可以仿照下面的分析過程。
function genDefaultModel (el,value,modifiers) {
var type = el.attrsMap.type;
// v-model和v-bind值相同值,有衝突會報錯
{
var value$1 = el.attrsMap['v-bind:value'] || el.attrsMap[':value'];
var typeBinding = el.attrsMap['v-bind:type'] || el.attrsMap[':type'];
if (value$1 && !typeBinding) {
var binding = el.attrsMap['v-bind:value'] ? 'v-bind:value' : ':value';
warn$1(
binding + "=\"" + value$1 + "\" conflicts with v-model on the same element " +
'because the latter already expands to a value binding internally',
el.rawAttrsMap[binding]
);
}
}
// modifiers存貯的是v-model的修飾符。
var ref = modifiers || {};
// lazy,trim,number是可供v-model使用的修飾符
var lazy = ref.lazy;
var number = ref.number;
var trim = ref.trim;
var needCompositionGuard = !lazy && type !== 'range';
// lazy修飾符將觸發同步的事件從input改爲change
var event = lazy ? 'change' : type === 'range' ? RANGE_TOKEN : 'input';
var valueExpression = '$event.target.value';
// 過濾用戶輸入的首尾空白符
if (trim) {
valueExpression = "$event.target.value.trim()";
}
// 將用戶輸入轉爲數值類型
if (number) {
valueExpression = "_n(" + valueExpression + ")";
}
// genAssignmentCode函數是爲了處理v-model的格式,允許使用以下的形式: v-model="a.b" v-model="a[b]"
var code = genAssignmentCode(value, valueExpression);
if (needCompositionGuard) {
// 保證了不會在輸入法組合文字過程中得到更新
code = "if($event.target.composing)return;" + code;
}
// 添加value屬性
addProp(el, 'value', ("(" + value + ")"));
// 綁定事件
addHandler(el, event, code, null, true);
if (trim || number) {
addHandler(el, 'blur', '$forceUpdate()');
}
}
function genAssignmentCode (value,assignment) {
// 處理v-model的格式,v-model="a.b" v-model="a[b]"
var res = parseModel(value);
if (res.key === null) {
// 普通情形
return (value + "=" + assignment)
} else {
// 對象形式
return ("$set(" + (res.exp) + ", " + (res.key) + ", " + assignment + ")")
}
}
genDefaultModel
的邏輯有兩部分,一部分是針對修飾符產生不同的事件處理字符串,二是爲v-model
產生的AST
樹添加屬性和事件相關的屬性。其中最重要的兩行代碼是
// 添加value屬性
addProp(el, 'value', ("(" + value + ")"));
// 綁定事件屬性
addHandler(el, event, code, null, true);
addHandler
在之前介紹事件時分析過,他會爲AST
樹添加事件相關的屬性,同樣的addProp
也會爲AST
樹添加props
屬性。最終AST
樹新增了兩個屬性:
回到genData
,通過genDirectives
處理後,原先的AST
樹新增了兩個屬性,因此在字符串生成階段同樣需要處理props
和events
的分支。
function genData$2 (el, state) {
var data = '{';
// 已經分析過的genDirectives
var dirs = genDirectives(el, state);
// 處理props
if (el.props) {
data += "domProps:" + (genProps(el.props)) + ",";
}
// 處理事件
if (el.events) {
data += (genHandlers(el.events, false)) + ",";
}
}
最終render
函數的結果爲:
"_c('input',{directives:[{name:"model",rawName:"v-model",value:(message),expression:"message"}],attrs:{"type":"text"},domProps:{"value":(message)},on:{"input":function($event){if($event.target.composing)return;message=$event.target.value}}})"
<input type="text" v-model="value">
如果覺得上面的流程分析囉嗦,可以直接看下面的結論,對比模板和生成的render
函數,我們可以得到:
input
標籤所有屬性,包括指令相關的內容都是以data
屬性的形式作爲參數的整體傳入_c(即:createElement)
函數。input type
的類型,在data
屬性中,以attrs
鍵值對存在。v-model
會有對應的directives
屬性描述指令的相關信息。- 爲什麼說
v-model
是一個語法糖,從render
函數的最終結果可以看出,它最終以兩部分形式存在於input
標籤中,一個是將value1
以props
的形式存在(domProps
)中,另一個是以事件的形式存儲input
事件,並保留在on
屬性中。 - 重要的一個關鍵,事件用
$event.target.composing
屬性來保證不會在輸入法組合文字過程中更新數據,這點我們後面會再次提到。
4 - patch真實節點
在patch
之前還有一個生成vnode
的過程,這個過程沒有什麼特別之處,所有的包括指令,屬性會以data
屬性的形式傳遞到構造函數Vnode
中,最終的Vnode
擁有directives,domProps,on
屬性:
有了Vnode
之後緊接着會執行patchVnode
,patchVnode
過程是一個真實節點創建的過程,其中的關鍵是createElm
方法,這個方法我們在不同的場合也分析過,前面的源碼得到指令相關的信息也會保留在vnode
的data
屬性裏,所以對屬性的處理也會走invokeCreateHooks
邏輯。
function createElm() {
···
// 針對指令的處理
if (isDef(data)) {
invokeCreateHooks(vnode, insertedVnodeQueue);
}
}
invokeCreateHooks
會調用定義好的鉤子函數,對vnode
上定義的屬性,指令,事件等進行真實DOM的處理,步驟包括以下(不包含全部):
updateDOMProps
會利用vnode data
上的domProps
更新input
標籤的value
值;updateAttrs
會利用vnode data
上的attrs
屬性更新節點的屬性值;updateDomListeners
利用vnode data
上的on
屬性添加事件監聽。
因此v-model
語法糖最終反應的結果,是通過監聽表單控件自身的input
事件(其他類型有不同的監聽事件類型),去影響自身的value
值。如果沒有v-model
的語法糖,我們可以這樣寫:
<input type="text" :value="message" @input="(e) => { this.message = e.target.value }" >
5 - 語法糖的背後
然而v-model
僅僅是起到合併語法,創建一個新的語法糖的意義嗎? **顯然答案是否定的,對於需要使用輸入法 (如中文、日文、韓文等) 的語言,你會發現 v-model
不會在輸入法組合文字過程中得到更新。**這就是v-model
的一個重要的特點。它會在事件處理這一層添加新的事件監聽compositionstart,compositionend
,他們會分別在語言輸入的開始和結束時監聽到變化,只要藉助$event.target.composing
,就可以設計出只會在輸入法組合文字的結束階段才更新數據,這有利於提高用戶的使用體驗。這一部分我想借助脫離框架的表單來幫助理解。
脫離框架的一個視圖響應數據的實現(效果類似於v-model):
// html
<input type="text" id="inputValue">
<span id="showValue"></span>
// js
<script>
let input = document.getElementById('inputValue');
let show = document.getElementById('showValue');
input.value = 123;
show.innerText = input.value
function onCompositionStart(e) {
e.target.composing = true;
}
function onCompositionEnd(e) {
if (!e.target.composing) {
return
}
e.target.composing = false;
show.innerText = e.target.value
}
function onInputChange(e) {
// e.target.composing表示是否還在輸入中
if(e.target.composing)return;
show.innerText = e.target.value
}
input.addEventListener('input', onInputChange)
input.addEventListener('compositionstart', onCompositionStart)// 組合輸入開始
input.addEventListener('compositionend', onCompositionEnd) // 組合輸入結束
</script>
二: 組件使用v-model
最後我們簡單說說在父組件中使用v-model
,可以先看結論,組件上使用v-model
本質上是子父組件通信的語法糖。先看一個簡單的使用例子。
var child = {
template: '<div><input type="text" :value="value" @input="emitEvent">{{value}}</div>',
methods: {
emitEvent(e) {
this.$emit('input', e.target.value)
}
},
props: ['value']
}
new Vue({
data() {
return {
message: 'test'
}
},
components: {
child
},
template: '<div id="app"><child v-model="message"></child></div>',
el: '#app'
})
父組件上使用v-model
, 子組件默認會利用名爲 value
的 prop
和名爲 input
的事件,當然像select
表單會以其他默認事件的形式存在。分析源碼的過程也大致類似,這裏只列舉幾個特別的地方。
AST
生成階段和普通表單控件的區別在於,當遇到child
時,由於不是普通的html
標籤,會執行getComponentModel
的過程,而getComponentModel
的結果是在AST
樹上添加model
的屬性。
function model() {
if (!config.isReservedTag(tag)) {
genComponentModel(el, value, modifiers);
}
}
function genComponentModel (el,value,modifiers) {
var ref = modifiers || {};
var number = ref.number;
var trim = ref.trim;
var baseValueExpression = '$$v';
var valueExpression = baseValueExpression;
if (trim) {
valueExpression =
"(typeof " + baseValueExpression + " === 'string'" +
"? " + baseValueExpression + ".trim()" +
": " + baseValueExpression + ")";
}
if (number) {
valueExpression = "_n(" + valueExpression + ")";
}
var assignment = genAssignmentCode(value, valueExpression);
// 在ast樹上添加model屬性,其中有value,expression,callback屬性
el.model = {
value: ("(" + value + ")"),
expression: JSON.stringify(value),
callback: ("function (" + baseValueExpression + ") {" + assignment + "}")
};
}
最終AST
樹的結果:
{
model: {
callback: "function ($$v) {message=$$v}"
expression: ""message""
value: "(message)"
}
}
經過對AST
樹的處理後,回到genData$2
的流程,由於有了model
屬性,父組件拼接的字符串會做進一步處理。
function genData$2 (el, state) {
var data = '{';
var dirs = genDirectives(el, state);
···
// v-model組件的render函數處理
if (el.model) {
data += "model:{value:" + (el.model.value) + ",callback:" + (el.model.callback) + ",expression:" + (el.model.expression) + "},";
}
···
return data
}
因此,父組件最終的render
函數表現爲: "_c('child',{model:{value:(message),callback:function ($$v) {message=$$v},expression:"message"}})"
子組件的創建階段照例會執行createComponent
,其中針對model
的邏輯需要特別說明。
function createComponent() {
// transform component v-model data into props & events
if (isDef(data.model)) {
// 處理父組件的v-model指令對象
transformModel(Ctor.options, data);
}
}
function transformModel (options, data) {
// prop默認取的是value,除非配置上有model的選項
var prop = (options.model && options.model.prop) || 'value';
// event默認取的是input,除非配置上有model的選項
var event = (options.model && options.model.event) || 'input'
// vnode上新增props的屬性,值爲value
;(data.attrs || (data.attrs = {}))[prop] = data.model.value;
// vnode上新增on屬性,標記事件
var on = data.on || (data.on = {});
var existing = on[event];
var callback = data.model.callback;
if (isDef(existing)) {
if (
Array.isArray(existing)
? existing.indexOf(callback) === -1
: existing !== callback
) {
on[event] = [callback].concat(existing);
}
} else {
on[event] = callback;
}
}
從transformModel
的邏輯可以看出,子組件vnode
會爲data.props
添加 data.model.value
,並且給data.on
添加data.model.callback
。因此父組件v-model
語法糖本質上可以修改爲
<child :value="message" @input="function(e){message = e}"></child>
顯然,這種寫法就是事件通信的寫法,這個過程又回到對事件指令的分析過程了。因此我們可以很明顯的意識到,組件使用v-model
本質上還是一個子父組件通信的語法糖。