v-model資料繫結分析 阿新 • • 發佈：2020-10-17 # v-model資料繫結分析 `v-model`是`Vue`提供的指令，其主要作用是可以實現在表單``、``及`<select>`等元素以及元件上建立雙向資料繫結，其本質上就是一種語法糖，既可以直接定義在原生表單元素，也可以支援自定義元件。在元件的實現中，可以配置子元件接收的`prop`名稱，以及派發的事件名稱實現元件內的`v-model`雙向繫結。 ## 描述 可以用`v-model`指令在表單``、`<textarea>`及`<select>`元素上建立雙向資料繫結，其會根據控制元件型別自動選取正確的方法來更新元素，以``作為示例使用`v-model`。 ```html <!DOCTYPE html> <html> <head> <title>Vue</title> </head> <body> </body> </html> ``` 當不使用`v-model`語法糖時，可以自行實現一個雙向繫結，實際上`v-model`在內部為不同的輸入元素使用不同的`property`並丟擲不同的事件： * `input`和`textarea`元素使用`value property`和`input`事件。 * `checkbox`和`radio`元素使用`checked property`和`change`事件。 * `select`元素將`value`作為`prop`並將`change`作為事件。 同樣以``作為示例而不使用`v-model`實現雙向繫結。 ```html <!DOCTYPE html> <html> <head> <title>Vue</title><div class="adscc"> <center><script type="text/javascript" src="/js/article.js"></script></center></div><div style="clear:both;"></div> </head> <body> </body> </html> ``` 對於`v-model`還有修飾符用以控制使用者輸入： * `.trim`: 輸入首尾空格過濾。 * `.lazy`: 取代`input`事件而監聽`change`事件。 * `.number`: 輸入字串轉為有效的數字，如果這個值無法被`parseFloat()`解析，則會返回原始的值。 ```html <!DOCTYPE html> <html> <head> <title>Vue</title> </head> <body> </body> </html> ``` 當使用自定義元件時，在元件上的`v-model`預設會利用名為`value`的`prop`和名為`input`的事件，但是像單選框、複選框等型別的輸入控制元件可能會將`value attribute`用於不同的目的，此時可以使用`model`選項可以用來避免這樣的衝突。 ```html <!DOCTYPE html> <html> <head> <title>Vue</title><div class="adscc"> <center><script type="text/javascript" src="/js/article.js"></script></center></div><div style="clear:both;"></div> </head> <body> </body> </html> ``` ## 分析 `Vue`原始碼的實現比較複雜，會處理各種相容問題與異常以及各種條件分支，文章分析比較核心的程式碼部分，精簡過後的版本，重要部分做出註釋，`commit id`為`ef56410`。 `v-model`屬於`Vue`的指令，所以從編譯階段開始分析，在解析到指令之前，`Vue`的解析階段大致流程：解析模版字串生成`AST`、優化語法樹`AST`、生成`render`字串。 ```javascript // dev/src/compiler/index.js line 11 export const createCompiler = createCompilerCreator(function baseCompile ( template: string, options: CompilerOptions ): CompiledResult { const ast = parse(template.trim(), options) // 生成AST if (options.optimize !== false) { optimize(ast, options) // 優化AST } const code = generate(ast, options) // 生成程式碼 即render字串 return { ast, render: code.render, staticRenderFns: code.staticRenderFns } }) ``` 對指令的處理就在生成`render`字串的過程，也就是`generate`函式的處理過程，在`generate`中呼叫`genElement -><div class="adscc"> <center><script type="text/javascript" src="/js/article.js"></script></center></div><div style="clear:both;"></div> genData -> genDirectives`，文章主要從`genDirectives`函式進行分析。 ```javascript // dev/src/compiler/codegen/index.js line 43 export function generate ( ast: ASTElement | void, options: CompilerOptions ): CodegenResult { const state = new CodegenState(options) const code = ast ? genElement(ast, state) : '_c("div")' return { render: `with(this){return ${code}}`, // render字串 staticRenderFns: state.staticRenderFns } } // dev/src/compiler/codegen/index.js line 55 export function genElement (el: ASTElement, state: CodegenState): string { // ... data = genData(el, state) // ... } // dev/src/compiler/codegen/index.js line 219 export function genData (el: ASTElement, state: CodegenState): string { // ... const dirs = genDirectives(el, state) // ... } ``` 在生成`AST`階段，也就是`parse`階段，`v-model`被當做普通的指令解析到`el.directives`中，`genDrirectives`方法就是遍歷`el.directives`，然後獲取每一個指令對應的方法，對於`v-model`而言，在此處獲取的是`{name: "model", rawName: "v-model" ...}`，通過`state`找到`model`指令對應的方法`model()`並執行該方法。 ```javascript // dev/src/compiler/codegen/index.js line 309 function genDirectives (el: ASTElement, state: CodegenState): string | void { const dirs = el.directives // 獲取指令 if (!dirs) return let res = 'directives:[' let hasRuntime = false let i, l, dir, needRuntime for (i = 0, l = dirs.length; i < l; i++) { // 遍歷指令 dir = dirs[i] needRuntime = true const gen: DirectiveFunction = state.directives[dir.name] // 對於v-model來說 const gen = state.directives["model"]; 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) + ']' } } ``` `model`方法主要是根據傳入的引數對`tag`的型別進行判斷，呼叫不同的處理邏輯。 ```javascript // dev/src/platforms/web/compiler/directives/model.js line 14 export default function model ( el: ASTElement, dir: ASTDirective, _warn: Function ): ?boolean { warn = _warn const value = dir.value const modifiers = dir.modifiers const tag = el.tag const type = el.attrsMap.type if (process.env.NODE_ENV !== 'production') { // inputs with type="file" are read only and setting the input's // value will throw an error. if (tag === 'input' && type === 'file') { warn( `<${el.tag} v-model="${value}" type="file">:\n` + `File inputs are read only. Use a v-on:change listener instead.`, el.rawAttrsMap['v-model'] ) } } // 分支處理 if (el.component) { genComponentModel(el, value, modifiers) // component v-model doesn't need extra runtime return false } else if (tag === 'select') { genSelect(el, value, modifiers) } else if (tag === 'input' && type === 'checkbox') { genCheckboxModel(el, value, modifiers) } else if (tag === 'input' && type === 'radio') { genRadioModel(el, value, modifiers) } else if (tag === 'input' || tag === '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 if (process.env.NODE_ENV !== 'production') { warn( `<${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 } ``` `genDefaultModel`函式先處理了`modifiers`修飾符，其不同主要影響的是`event`和`valueExpression`的值，對於``標籤`event`為`input`，`valueExpression`為`$event.target.value`，然後去執行`genAssignmentCode`去生成程式碼，以及新增屬性值與事件處理。 ```javascript // dev/src/platforms/web/compiler/directives/model.js line 127 function genDefaultModel ( el: ASTElement, value: string, modifiers: ?ASTModifiers ): ?boolean { const type = el.attrsMap.type // warn if v-bind:value conflicts with v-model // except for inputs with v-bind:type // value與v-model衝突則發出警告 if (process.env.NODE_ENV !== 'production') { const value = el.attrsMap['v-bind:value'] || el.attrsMap[':value'] const typeBinding = el.attrsMap['v-bind:type'] || el.attrsMap[':type'] if (value && !typeBinding) { const binding = el.attrsMap['v-bind:value'] ? 'v-bind:value' : ':value' warn( `${binding}="${value}" conflicts with v-model on the same element ` + 'because the latter already expands to a value binding internally', el.rawAttrsMap[binding] ) } } // 修飾符處理 const { lazy, number, trim } = modifiers || {} const needCompositionGuard = !lazy && type !== 'range' const event = lazy ? 'change' : type === 'range' ? RANGE_TOKEN : 'input' let valueExpression = '$event.target.value' if (trim) { valueExpression = `$event.target.value.trim()` } if (number) { valueExpression = `_n(${valueExpression})` } let code = genAssignmentCode(value, valueExpression) if (needCompositionGuard) { code = `if($event.target.composing)return;${code}` } addProp(el, 'value', `(${value})`) addHandler(el, event, code, null, true) if (trim || number) { addHandler(el, 'blur', '$forceUpdate()') } } // dev/src/compiler/directives/model.js line 36 export function genAssignmentCode ( value: string, assignment: string ): string { const res = parseModel(value) if (res.key === null) { return `${value}=${assignment}` } else { return `$set(${res.exp}, ${res.key}, ${assignment})` } } ``` ## 每日一題 ``` https://github.com/WindrunnerMax/EveryDay ``` ## 參考 ``` https://cn.vuejs.org/v2/api/#v-model https://www.jianshu.com/p/19bb4912c62a https://www.jianshu.com/p/0d089f770ab2 https://cn.vuejs.org/v2/guide/forms.html https://juejin.im/post/6844903784963899400 https://juejin.im/post/6844903999414485005 https://segmentfault.com/a/1190000021516035 https://segmentfault.com/a/1190000015848976 https://github.com/haizlin/fe-interview/issues/560 https://ustbhuangyi.github.io/vue-analysis/v2/extend/v-model.h </div> <div class="entry-footer"> <div class="entry-tag"> </div> <div class="entry-page"> <center><script type="text/javascript" src="/js/article.js"></script></center> </div> <h3 class="entry-related-title">相關推薦</h3> <style> .r{ margin-bottom:10px; border-bottom:1px solid #f1f1f1; padding-bottom:10px;} .r p{ color:#999; line-height:25px;} .r h5 a{ font-size:16px; line-height:25px;} .r h5 a:hover{ color:#ff6600} </style> <div class="r"> <h5><a href="/content/1602946448.html" target="_blank"><font color=red>v</font>-<font color=red>model</font><font color=red>資料</font><font color=red>繫</font><font color=red>結</font><font color=red>分析</font></a></h5> <p> # v-model資料繫結分析 `v-model`是`Vue`提供的指令，其主要作用是可以實現在表單``、``及``等元素以及元件上建立雙向資料繫結，其本質上就是一種語法糖，既可以直接定義在原生表單元素，也可以支援自定義元件。在元件的實現中，可以配置子元件接收的`prop`名稱，以及派發的事件名稱實現元件內的 </p> </div> <div class="r"> <h5><a href="/content/1543283102.html" target="_blank">vue 入門，<font color=red>v</font>-<font color=red>model</font><font color=red>資料</font><font color=red>繫</font><font color=red>結</font></a></h5> <p> vue 入門，v-model資料繫結 ================================ ©Copyright 蕃薯耀 2018年11月27日 http://fanshuyao.iteye.com/ <!DOCTYPE ht </p> </div> <div class="r"> <h5><a href="/content/1541876109.html" target="_blank">vue自定義元件實現<font color=red>v</font>-<font color=red>model</font>雙向<font color=red>繫</font><font color=red>結</font></a></h5> <p> vue中父子元件通訊，都是單項的，直接在子元件中修改prop傳的值vue也會給出一個警告，接下來就用一個小列子一步一步實現了vue自定義的元件實現v-model雙向繫結，父元件值變了子元件也會跟著變，子元件中傳過來的值變了，父元件值也會跟著變化。如有錯誤的地方歡迎評論指出 父級元件 </p> </div> <div class="r"> <h5><a href="/content/1541931735.html" target="_blank">vue起步之三<font color=red>v</font>-bind<font color=red>資料</font><font color=red>繫</font><font color=red>結</font></a></h5> <p> 設定一個數據為website的值為http://www.baidu.com 在html中我們進行繫結通過v-bind:屬性名=“鍵名” 如：<a v-bind:href="website">web開發</a> 注意：這裡的website沒有兩個大括號 </p> </div> <div class="r"> <h5><a href="/content/1547287459.html" target="_blank">筆記(二),VUE <font color=red>V</font>-<font color=red>MODEL</font> 雙向<font color=red>繫</font><font color=red>結</font>,以及 watch 和 computed的區別</a></h5> <p> vue官網上的v-model指令的介紹是 v-model 預期：隨表單控制元件型別不同而不同。 限制： <input> <select> <textarea> components </p> </div> <div class="r"> <h5><a href="/content/1549002425.html" target="_blank">Vue-<font color=red>V</font>-<font color=red>model</font>引數<font color=red>繫</font><font color=red>結</font></a></h5> <p> Vue框架很核心的功能就是雙向的資料繫結。 雙向是指：Vue 物件的改變會直接影響到 HTML 的標籤的變化，而且標籤的變化也會反過來影響 Vue 物件的屬性的變化。 v-model 指令用來在 <input> 、 <select>、 text、 c </p> </div> <div class="r"> <h5><a href="/content/1543457884.html" target="_blank">vue.js <font color=red>v</font>-<font color=red>model</font>雙向<font color=red>資料</font><font color=red>繫</font><font color=red>結</font>， vue.js form表單<font color=red>資料</font><font color=red>繫</font><font color=red>結</font></a></h5> <p> vue.js v-model雙向資料繫結， vue.js form表單資料繫結 ================================ ©Copyright 蕃薯耀 2018年11月29日 http://fanshuyao.iteye.com/ &l </p> </div> <div class="r"> <h5><a href="/content/1543928827.html" target="_blank">vue指令<font color=red>v</font>-<font color=red>model</font>(雙向<font color=red>資料</font><font color=red>繫</font><font color=red>結</font>)自動收集<font color=red>資料</font></a></h5> <p> 前言：表單提交資料在網站頁面中是十分常見的，而這個表單資料的獲取在原生寫法甚至於JQ都是比較麻煩的（首先需要獲取DOM，然後獲取值）。 但是，在vue的專案環境下，表單資料的收集又該怎麼辦呢？（這種自己寫input元素的方法在實際專案中是不常用的哈，因為一般我們都會用一個UI庫，方便而快捷！ </p> </div> <div class="r"> <h5><a href="/content/1544440706.html" target="_blank">Vue屬性<font color=red>繫</font><font color=red>結</font><font color=red>v</font>-bind:和雙向<font color=red>資料</font><font color=red>繫</font><font color=red>結</font><font color=red>v</font>-<font color=red>model</font></a></h5> <p> <body> <!--屬性繫結v-bind: 可以直接省略為 :--> <!--一旦使用模版指令 等號之後的就是一個js表示式，所以裡面可以使用很多js表示式--> <div id="root"> <div v-b </p> </div> <div class="r"> <h5><a href="/content/1544485174.html" target="_blank"><font color=red>v</font>-<font color=red>model</font>——雙向<font color=red>資料</font><font color=red>繫</font><font color=red>結</font></a></h5> <p> 注意： 1.v-model雙向繫結，v-bind只能單項繫結 2.v-model只能用在表單元素中 HTML程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta ch </p> </div> <div class="r"> <h5><a href="/content/1544878627.html" target="_blank">Vue 框架的<font color=red>v</font>-<font color=red>model</font> 雙向<font color=red>資料</font><font color=red>繫</font><font color=red>結</font></a></h5> <p> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device- </p> </div> <div class="r"> <h5><a href="/content/1545095716.html" target="_blank">Vue學習日誌第二天 <font color=red>v</font>-<font color=red>model</font> <font color=red>資料</font>雙向<font color=red>繫</font><font color=red>結</font> eval函式用法</a></h5> <p> <div id="app"> <p> {{msg}}</p> <p><input type="text" v-b </p> </div> <div class="r"> <h5><a href="/content/1548955653.html" target="_blank">vue中關於checkbox<font color=red>資料</font><font color=red>繫</font><font color=red>結</font><font color=red>v</font>-<font color=red>model</font>指令的個人理解</a></h5> <p> vue.js為開發者提供了很多便利的指令，其中v-model用於表單的資料繫結很常見，下面是最常見的例子：<div id='myApp'> <input type="text" v-model="msg"><br> {{msg} </p> </div> <div class="r"> <h5><a href="/content/1549931057.html" target="_blank">vue.js <font color=red>v</font>-<font color=red>model</font><font color=red>資料</font>雙向<font color=red>繫</font><font color=red>結</font>例項</a></h5> <p> vue.js的一大功能便是實現資料的雙向繫結，本文就表單處理時運用v-model指令實現雙向繫結做一個介紹： v-model這個指令只能用在<input>, <select>,<textarea>這些表單元素上，所謂雙向繫結，指的就是我們 </p> </div> <div class="r"> <h5><a href="/content/1550415091.html" target="_blank">vue中<font color=red>v</font>-<font color=red>model</font><font color=red>資料</font>雙向<font color=red>繫</font><font color=red>結</font></a></h5> <p> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script </p> </div> <div class="r"> <h5><a href="/content/1557658804.html" target="_blank">通過<font color=red>v</font>-<font color=red>model</font>‘實現’元件雙向<font color=red>資料</font><font color=red>繫</font><font color=red>結</font></a></h5> <p> 單向資料流 單向資料流是Vue元件一個非常明顯的特徵，不應該在子元件中直接修改props的值 如果傳遞的prop僅僅用作展 </p> </div> <div class="r"> <h5><a href="/content/1542248846.html" target="_blank">Vue<font color=red>資料</font><font color=red>繫</font><font color=red>結</font>後文本閃爍問題<font color=red>分析</font>及解決方案</a></h5> <p> Vue文字閃爍問題 一、問題描述 程式碼示例： <div id="app"> <span>{{user.userName}}</span> </div> 頁面顯示： {{user.userName}} 問題詳情：在載 </p> </div> <div class="r"> <h5><a href="/content/1544105706.html" target="_blank">Spring MVC <font color=red>資料</font><font color=red>繫</font><font color=red>結</font>流程<font color=red>分析</font></a></h5> <p> 1. 資料繫結流程原理★ ① Spring MVC 主框架將 ServletRequest 物件及目標方法的入參例項傳遞給 WebDataBinderFactory 例項，以建立 DataBinder 例項物件 ② </p> </div> <div class="r"> <h5><a href="/content/1544991845.html" target="_blank">SpringMVC型別轉換、<font color=red>資料</font><font color=red>繫</font><font color=red>結</font>詳解[附帶原始碼<font color=red>分析</font>]</a></h5> <p> 目錄 前言 SpringMVC是目前主流的Web MVC框架之一。 public String method(Integer num, Date birth) { ... } Http請求傳遞的資料都是字串String型別的，上面這個方法在Contro </p> </div> <div class="r"> <h5><a href="/content/1546120100.html" target="_blank">AngularJs 在ng-repeat中動態使用ng-<font color=red>model</font>進行雙向<font color=red>資料</font><font color=red>繫</font><font color=red>結</font></a></h5> <p> 首先說明一下功能需求： 當點選一次增加按鈕的時候，下方就會多一行輸入框； 當點選一次刪除按鈕的時候，所點選的刪除按鈕那行的輸入框會消失； 當點選列印資訊按鈕的時候，把所有輸入框中的資料讀取出來，並列印到控制檯上。 由此可看出，帶有刪除按鈕的這部分DIV是動態的。 </p> </div> <!-- <ul class="entry-related clearfix"> <li> </li> </ul>--> </div> </div> </article> </div> <aside class="sidebar"> <div id="search-7" class="widget widget_search"> <h3 class="widget-title">搜尋</h3> <form name="formsearch" class="search-form" action="https://www.796t.com/public/api.php" method="get"> <input type="hidden" name="app" value="search"/> <input type="text" class="keyword" name="q" placeholder="輸入關鍵詞..." value=""> <input type="submit" class="submit" value=""> </form> </div> <div id="wpcom-image-ad-4" class="widget widget_image_ad"></div> <div id="tag_cloud-3" class="widget widget_tag_cloud"> <h3 class="widget-title">基礎教學</h3> <div class="tagcloud"> <a href="https://www.796t.com/category.php?cid=18" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Mysql入門</a> <a href="https://www.796t.com/category.php?cid=19" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Sql入門</a> <a href="https://www.796t.com/category.php?cid=20" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Android入門</a> <a href="https://www.796t.com/category.php?cid=21" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Docker入門</a> <a href="https://www.796t.com/category.php?cid=22" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Go語言入門</a> <a href="https://www.796t.com/category.php?cid=23" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Ruby程式入門</a> <a href="https://www.796t.com/category.php?cid=24" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Python入門</a> <a href="https://www.796t.com/category.php?cid=25" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Python進階</a> <a href="https://www.796t.com/category.php?cid=26" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Django入門</a> <a href="https://www.796t.com/category.php?cid=27" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Python爬蟲入門</a> </div> </div> <div id="wpcom-image-ad-12" class="widget widget_image_ad"> </div> <div id="wpcom-post-thumb-3" class="widget widget_post_thumb"> <h3 class="widget-title">最近訪問</h3> <ul> <p><a href="/content/.html" style="font-size:16px;"> </a> </p> </ul> </div> </aside> </div> </div> <footer class="footer"> <div class="container"> <div class="clearfix"> <div class="footer-col footer-col-copy"> <ul class="footer-nav hidden-xs"> <li id="menu-item-109589" class="menu-item current-menu-item current_page_item menu-item-109589"><a href="https://www.796t.com/" aria-current="page">首頁</a></li><li class="menu-item menu-item-373"><a href="https://www.796t.com/category.php?cid=9">前端設計</a></li><li class="menu-item menu-item-373"><a href="https://www.796t.com/category.php?cid=10">程式設計</a></li><li class="menu-item menu-item-373"><a href="https://www.796t.com/category.php?cid=13">免費資源</a></li><li class="menu-item menu-item-373"><a href="https://www.796t.com/category.php?cid=14">實用技巧</a></li><li class="menu-item menu-item-373"><a href="https://www.796t.com/category.php?cid=15">資料庫</a></li><li class="menu-item menu-item-373"><a href="https://www.796t.com/category.php?cid=29">資訊</a></li><li class="menu-item menu-item-373"><a href="https://www.3du.tw/zidian.php">字典</a></li></ul> <div class="copyright"> <p>Copyright © 2002-2020 <a href="https://www.796t.com/">程式人生</a> 796T.COM All rights reserved. </p> </div> </div> <div class="footer-col footer-col-sns"> <div class="footer-sns"> </div> </div> </div> </div> </footer> <style> .footer{padding-bottom: 20px;} </style> <script type="text/javascript" src="/css/main.js"></script> <script type="text/javascript" src="/css/wp-embed.js"></script> <script type="text/javascript" src="/css/lazysizes.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.2/build/highlight.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.1.2/styles/atelier-estuary-light.css"> <script>hljs.initHighlightingOnLoad();</script> </body> </html>
