[[382290]]

本文轉(zhuǎn)載自微信公眾號(hào)「全棧修仙之路」，作者阿寶哥。轉(zhuǎn)載本文請(qǐng)聯(lián)系全棧修仙之路公眾號(hào)。  

本文是 Vue 3.0 進(jìn)階系列 的第三篇文章，在閱讀本文前，建議你先閱讀 Vue 3.0 進(jìn)階之指令探秘 和 Vue 3.0 進(jìn)階之自定義事件探秘 這兩篇文章。在看具體示例前，阿寶哥先來簡(jiǎn)單介紹一下雙向綁定，它由兩個(gè)單向綁定組成：

• 模型 —> 視圖數(shù)據(jù)綁定;
• 視圖 —> 模型事件綁定。

在 Vue 中 :value 實(shí)現(xiàn)了 模型到視圖 的數(shù)據(jù)綁定，@event 實(shí)現(xiàn)了 視圖到模型 的事件綁定：

<input :value="searchText" @input="searchText = $event.target.value" /> 

而在表單中，通過使用內(nèi)置的 v-model 指令，我們可以輕松地實(shí)現(xiàn)雙向綁定，比如 。介紹完上面的內(nèi)容，接下來阿寶哥將以一個(gè)簡(jiǎn)單的示例為切入點(diǎn)，帶大家一起一步步揭開雙向綁定背后的秘密。

<div id="app"> 
   <input v-model="searchText" /> 
   <p>搜索的內(nèi)容：{{searchText}}</p> 
</div> 
<script> 
   const { createApp } = Vue 
   const app = Vue.createApp({ 
     data() { 
       return { 
         searchText: "阿寶哥" 
       } 
     } 
   }) 
   app.mount('#app') 
</script> 

在以上示例中，我們?cè)?input 搜索輸入框中應(yīng)用了 v-model 指令，當(dāng)輸入框的內(nèi)容發(fā)生變化時(shí)，p 標(biāo)簽中內(nèi)容會(huì)同步更新。

要揭開 v-model 指令背后的秘密，我們可以利用 Vue 3 Template Explorer 在線工具，來看一下模板編譯后的結(jié)果：

<input v-model="searchText" /> 
 
const _Vue = Vue 
return function render(_ctx, _cache, $props, $setup, $data, $options) { 
  with (_ctx) { 
    const { vModelText: _vModelText, createVNode: _createVNode,  
      withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue 
 
    return _withDirectives((_openBlock(), _createBlock("input", { 
      "onUpdate:modelValue": $event => (searchText = $event) 
    }, null, 8 /* PROPS */, ["onUpdate:modelValue"])),  
    [  
      [_vModelText, searchText]  
    ]) 
  } 
} 

在 模板生成的渲染函數(shù)中，我們看到了 Vue 3.0 進(jìn)階之指令探秘 文章中介紹的 withDirectives 函數(shù)，該函數(shù)用于把指令信息添加到 VNode 對(duì)象上，它被定義在 runtime-core/src/directives.ts 文件中：

// packages/runtime-core/src/directives.ts 
export function withDirectives<T extends VNode>( 
  vnode: T, 
  directives: DirectiveArguments 
): T { 
  const internalInstance = currentRenderingInstance 
  // 省略部分代碼 
  const instance = internalInstance.proxy 
  const bindings: DirectiveBinding[] = vnode.dirs || (vnode.dirs = []) 
  for (let i = 0; i < directives.length; i++) { 
    let [dir, value, arg, modifiers = EMPTY_OBJ] = directives[i] 
    // 在 mounted 和 updated 時(shí)，觸發(fā)相同行為，而不關(guān)系其他的鉤子函數(shù) 
    if (isFunction(dir)) { // 處理函數(shù)類型指令 
      dir = { 
        mounted: dir, 
        updated: dir 
      } as ObjectDirective 
    } 
    bindings.push({ // 把指令信息保存到vnode.dirs數(shù)組中 
      dir, instance, value,  
      oldValue: void 0, arg, modifiers 
    }) 
  } 
  return vnode 
} 

除此之外，在模板生成的渲染函數(shù)中，我們看到了 vModelText 指令，通過它的名稱，我們猜測(cè)該指令與模型相關(guān)，所以我們先來分析 vModelText 指令。

一、vModelText 指令

vModelText 指令是 ObjectDirective 類型的指令，該指令中定義了 3 個(gè)鉤子函數(shù)：

• created：在綁定元素的屬性或事件監(jiān)聽器被應(yīng)用之前調(diào)用。
• mounted：在綁定元素的父組件被掛載后調(diào)用。
• beforeUpdate：在更新包含組件的 VNode 之前調(diào)用。

// packages/runtime-dom/src/directives/vModel.ts 
type ModelDirective<T> = ObjectDirective<T & { _assign: AssignerFn }> 
 
export const vModelText: ModelDirective< 
  HTMLInputElement | HTMLTextAreaElement 
> = { 
  created(el, { modifiers: { lazy, trim, number } }, vnode) { 
    // ... 
  }, 
  mounted(el, { value }) { 
    // .. 
  }, 
  beforeUpdate(el, { value, modifiers: { trim, number } }, vnode) { 
    // .. 
  } 
} 

接下來，阿寶哥將逐一分析每個(gè)鉤子函數(shù)，這里先從 created 鉤子函數(shù)開始。

1.1 created 鉤子

// packages/runtime-dom/src/directives/vModel.ts 
export const vModelText: ModelDirective< 
  HTMLInputElement | HTMLTextAreaElement 
> = { 
  created(el, { modifiers: { lazy, trim, number } }, vnode) { 
    el._assign = getModelAssigner(vnode) 
    const castToNumber = number || el.type === 'number' // 是否轉(zhuǎn)為數(shù)值類型 
    // 若使用 lazy 修飾符，則在 change 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步 
    addEventListener(el, lazy ? 'change' : 'input', e => {  
      if ((e.target as any).composing) return // 組合輸入進(jìn)行中 
      let domValue: string | number = el.value 
      if (trim) { // 自動(dòng)過濾用戶輸入的首尾空白字符 
        domValue = domValue.trim() 
      } else if (castToNumber) { // 自動(dòng)將用戶的輸入值轉(zhuǎn)為數(shù)值類型 
        domValue = toNumber(domValue) 
      } 
      el._assign(domValue) // 更新模型 
    }) 
    if (trim) { 
      addEventListener(el, 'change', () => { 
        el.value = el.value.trim() 
      }) 
    } 
    if (!lazy) { 
      addEventListener(el, 'compositionstart', onCompositionStart) 
      addEventListener(el, 'compositionend', onCompositionEnd) 
      // Safari < 10.2 & UIWebView doesn't fire compositionend when 
      // switching focus before confirming composition choice 
      // this also fixes the issue where some browsers e.g. iOS Chrome 
      // fires "change" instead of "input" on autocomplete. 
      addEventListener(el, 'change', onCompositionEnd) 
    } 
  }, 
} 

對(duì)于 created 方法來說，它會(huì)通過解構(gòu)的方式獲取 v-model 指令上添加的修飾符，在 v-model 上可以添加 .lazy、.number 和 .trim 修飾符。這里我們簡(jiǎn)單介紹一下 3 種修飾符的作用：

• .lazy 修飾符：在默認(rèn)情況下，v-model 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步。你可以添加 lazy 修飾符，從而轉(zhuǎn)為在 change 事件之后進(jìn)行同步。

<!-- 在 change 時(shí)而非 input 時(shí)更新 --> 
<input v-model.lazy="msg" /> 

• .number 修飾符：如果想自動(dòng)將用戶的輸入值轉(zhuǎn)為數(shù)值類型，可以給 v-model 添加 number 修飾符。這通常很有用，因?yàn)榧词乖? type="number" 時(shí)，HTML 輸入元素的值也總會(huì)返回字符串。如果這個(gè)值無法被 parseFloat() 解析，則會(huì)返回原始的值。

<input v-model.number="age" type="number" /> 

• .trim 修飾符：如果要自動(dòng)過濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符。

<input v-model.trim="msg" /> 

而在 created 方法內(nèi)部，會(huì)通過 getModelAssigner 函數(shù)獲取 ModelAssigner，從而用于更新模型對(duì)象。

// packages/runtime-dom/src/directives/vModel.ts 
const getModelAssigner = (vnode: VNode): AssignerFn => { 
  const fn = vnode.props!['onUpdate:modelValue'] 
  return isArray(fn) ? value => invokeArrayFns(fn, value) : fn 
} 

對(duì)于我們的示例來說，通過 getModelAssigner 函數(shù)獲取的 ModelAssigner 對(duì)象是 $event => (searchText = $event) 函數(shù)。在獲取 ModelAssigner 對(duì)象之后，我們就可以更新模型的值了。created 方法中的其他代碼相對(duì)比較簡(jiǎn)單，阿寶哥就不詳細(xì)介紹了。這里我們來介紹一下 compositionstart 和 compositionend 事件。

中文、日文、韓文等需要借助輸入法組合輸入，即使是英文，也可以利用組合輸入進(jìn)行選詞等操作。在一些實(shí)際場(chǎng)景中，我們希望等用戶組合輸入完的一段文字才進(jìn)行對(duì)應(yīng)操作，而不是每輸入一個(gè)字母，就執(zhí)行相關(guān)操作。

比如，在關(guān)鍵字搜索場(chǎng)景中，等用戶完整輸入 阿寶哥 之后再執(zhí)行搜索操作，而不是輸入字母 a 之后就開始搜索。要實(shí)現(xiàn)這個(gè)功能，我們就需要借助 compositionstart 和 compositionend 事件。另外，需要注意的是，compositionstart 事件發(fā)生在 input 事件之前，因此利用它可以優(yōu)化中文輸入的體驗(yàn)。

了解完 compositionstart(組合輸入開始) 和 compositionend (組合輸入結(jié)束)事件，我們?cè)賮砜匆幌? onCompositionStart 和 onCompositionEnd 這兩個(gè)事件處理器：

function onCompositionStart(e: Event) { 
  ;(e.target as any).composing = true 
} 
 
function onCompositionEnd(e: Event) { 
  const target = e.target as any 
  if (target.composing) {  
    target.composing = false 
    trigger(target, 'input') 
  } 
} 
 
// 觸發(fā)元素上的指定事件 
function trigger(el: HTMLElement, type: string) { 
  const e = document.createEvent('HTMLEvents') 
  e.initEvent(type, true, true) 
  el.dispatchEvent(e) 
} 

當(dāng)組合輸入時(shí)，在 onCompositionStart 事件處理器中，會(huì) e.target 對(duì)象上添加 composing 屬性并設(shè)置該屬性的值為 true。而在 change 事件或 input 事件回調(diào)函數(shù)中，如果發(fā)現(xiàn) e.target 對(duì)象的 composing 屬性為 true 則會(huì)直接返回。當(dāng)組合輸入完成后，在 onCompositionEnd 事件處理器中，會(huì)把 target.composing 的值設(shè)置為 false 并手動(dòng)觸發(fā) input 事件：

// packages/runtime-dom/src/directives/vModel.ts 
export const vModelText: ModelDirective< 
  HTMLInputElement | HTMLTextAreaElement 
> = { 
  created(el, { modifiers: { lazy, trim, number } }, vnode) { 
    // 省略部分代碼 
    addEventListener(el, lazy ? 'change' : 'input', e => { 
      if ((e.target as any).composing) return 
     // ... 
    }) 
  }, 
} 

好的，created 鉤子函數(shù)就分析到這里，接下來我們來分析 mounted 鉤子。

1.2 mounted 鉤子

// packages/runtime-dom/src/directives/vModel.ts 
export const vModelText: ModelDirective< 
  HTMLInputElement | HTMLTextAreaElement 
> = { 
  // set value on mounted so it's after min/max for type="range" 
  mounted(el, { value }) { 
    el.value = value == null ? '' : value 
  }, 
} 

mounted 鉤子的邏輯很簡(jiǎn)單，如果 value 值為 null 時(shí)，把元素的值設(shè)置為空字符串，否則直接使用 value 的值。

1.3 beforeUpdate 鉤子

// packages/runtime-dom/src/directives/vModel.ts 
export const vModelText: ModelDirective< 
  HTMLInputElement | HTMLTextAreaElement 
> = { 
  beforeUpdate(el, { value, modifiers: { trim, number } }, vnode) { 
    el._assign = getModelAssigner(vnode) 
    // avoid clearing unresolved text. #2302 
    if ((el as any).composing) return 
    if (document.activeElement === el) { 
      if (trim && el.value.trim() === value) { 
        return 
      } 
      if ((number || el.type === 'number') && toNumber(el.value) === value) { 
        return 
      } 
    } 
    const newValue = value == null ? '' : value 
    if (el.value !== newValue) { // 新舊值不相等時(shí)，執(zhí)行更新操作 
      el.value = newValue 
    } 
  } 
} 

相信使用過 Vue 的小伙伴都知道，v-model 指令不僅可以應(yīng)用在 input 和 textarea 元素上，在復(fù)選框(Checkbox)、單選框(Radio)和選擇框(Select)上也可以使用 v-model 指令。不過需要注意的是，雖然這些元素上都是使用 v-model 指令，但實(shí)際上對(duì)于復(fù)選框、單選框和選擇框來說，它們是由不同的指令來完成對(duì)應(yīng)的功能。這里我們以單選框?yàn)槔?，來看一下?yīng)用 v-model 指令后，模板編譯的結(jié)果：

<input type="radio" value="One" v-model="picked" /> 
 
const _Vue = Vue 
return function render(_ctx, _cache, $props, $setup, $data, $options) { 
  with (_ctx) { 
    const { vModelRadio: _vModelRadio, createVNode: _createVNode,  
      withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue 
 
    return _withDirectives((_openBlock(), _createBlock("input", { 
      type: "radio", 
      value: "One", 
      "onUpdate:modelValue": $event => (picked = $event) 
    }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [ 
      [_vModelRadio, picked] 
    ]) 
  } 
} 

由以上代碼可知，在單選框應(yīng)用 v-model 指令后，雙向綁定的功能會(huì)交給 vModelRadio 指令來實(shí)現(xiàn)。除了 vModelRadio 之外，還有 vModelSelect 和 vModelCheckbox 指令，它們被定義在 runtime-dom/src/directives/vModel.ts 文件中，感興趣的小伙伴可以自行研究一下。

其實(shí) v-model 本質(zhì)上是語法糖。它負(fù)責(zé)監(jiān)聽用戶的輸入事件來更新數(shù)據(jù)，并在某些場(chǎng)景下進(jìn)行一些特殊處理。需要注意的是 v-model 會(huì)忽略所有表單元素的 value、checked、selected attribute 的初始值而總是將當(dāng)前活動(dòng)實(shí)例的數(shù)據(jù)作為數(shù)據(jù)來源。你應(yīng)該通過在組件的 data 選項(xiàng)中聲明初始值。

此外，v-model 在內(nèi)部為不同的輸入元素使用不同的 property 并拋出不同的事件：

• text 和 textarea 元素使用 value property 和 input 事件;
• checkbox 和 radio 元素使用 check property 和 change 事件;
• select 元素將 value 作為 prop 并將 change 作為事件。

這里你已經(jīng)知道，可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創(chuàng)建雙向數(shù)據(jù)綁定。但如果你也想在組件上使用 v-model 指令來創(chuàng)建雙向數(shù)據(jù)綁定，那應(yīng)該如何實(shí)現(xiàn)呢？

二、在組件上使用 v-model

假設(shè)你想定義一個(gè) custom-input 組件并在該組件上使用 v-model 指令來實(shí)現(xiàn)雙向綁定，在實(shí)現(xiàn)該功能前，我們先利用 Vue 3 Template Explorer 在線工具，看一下模板編譯后的結(jié)果：

<custom-input v-model="searchText"></custom-input> 
 
const _Vue = Vue 
return function render(_ctx, _cache, $props, $setup, $data, $options) { 
  with (_ctx) { 
    const { resolveComponent: _resolveComponent, createVNode: _createVNode,  
      openBlock: _openBlock, createBlock: _createBlock } = _Vue 
 
    const _component_custom_input = _resolveComponent("custom-input") 
    return (_openBlock(), _createBlock(_component_custom_input, { 
      modelValue: searchText, 
      "onUpdate:modelValue": $event => (searchText = $event) 
    }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"])) 
  } 
} 

通過觀察以上的渲染函數(shù)，我們可知在 custom-input 組件上應(yīng)用了 v-model 指令，經(jīng)過編譯器編譯之后，會(huì)生成一個(gè)名為 modelValue 的輸入屬性和一個(gè)名為 update:modelValue 的自定義事件名。如果你對(duì)自定義事件內(nèi)部原理還不清楚的話，可以閱讀 Vue 3.0 進(jìn)階之自定義事件探秘 這篇文章。了解完這些內(nèi)容之后，我們就可以開始實(shí)現(xiàn) custom-input 組件了：

<div id="app"> 
   <custom-input v-model="searchText"></custom-input> 
   <p>搜索的內(nèi)容：{{searchText}}</p> 
</div> 
<script> 
   const { createApp } = Vue 
   const app = Vue.createApp({ 
     data() { 
       return { 
         searchText: "阿寶哥" 
       } 
     } 
    }) 
   app.component('custom-input', { 
     props: ['modelValue'], 
     emits: ['update:modelValue'], 
     template: ` 
       <input type="text"  
          :value="modelValue" 
          @input="$emit('update:modelValue', $event.target.value)" 
       >` 
   }) 
   app.mount('#app') 
</script> 

在自定義組件中實(shí)現(xiàn)雙向綁定的功能，除了使用自定義事件之外，還可以使用計(jì)算屬性的功能來定義 getter 和 setter。這里阿寶哥就不展開介紹了，感興趣的小伙伴可以閱讀 Vue 3 官網(wǎng) - 組件基礎(chǔ) 的相關(guān)內(nèi)容。

三、阿寶哥有話說

3.1 如何修改 v-model 默認(rèn)的 prop 名和事件名？

默認(rèn)情況下，組件上的 v-model 使用 modelValue 作為 prop 和 update:modelValue 作為事件。我們可以通過向 v-model 指令傳遞參數(shù)來修改這些名稱：

<custom-input v-model:name="searchText"></custom-input> 

以上的模板，經(jīng)過編譯器編譯后的結(jié)果如下：

const _Vue = Vue 
return function render(_ctx, _cache, $props, $setup, $data, $options) { 
  with (_ctx) { 
    const { resolveComponent: _resolveComponent, createVNode: _createVNode,  
      openBlock: _openBlock, createBlock: _createBlock } = _Vue 
 
    const _component_custom_input = _resolveComponent("custom-input") 
    return (_openBlock(), _createBlock(_component_custom_input, { 
      name: searchText, 
      "onUpdate:name": $event => (searchText = $event) 
    }, null, 8 /* PROPS */, ["name", "onUpdate:name"])) 
  } 
} 

通過觀察生成的渲染函數(shù)，我們可知自定義 custom-input 組件接收一個(gè) name 輸入屬性并含有一個(gè)名為 update:name 的自定義事件：

app.component('custom-input', { 
  props: { 
    name: String 
  }, 
  emits: ['update:name'], 
  template: ` 
    <input type="text" 
      :value="name" 
      @input="$emit('update:name', $event.target.value)"> 
  ` 
}) 

至于自定義的事件名為什么是 "onUpdate:name" 這種形式，你可以從 Vue 3.0 進(jìn)階之自定義事件探秘 這篇文章中介紹的 emit 函數(shù)中找到對(duì)應(yīng)的答案。

3.2 能否在組件上使用多個(gè) v-model 指令？

在某些場(chǎng)景下，我們是希望在組件上使用多個(gè) v-model 指令，每個(gè)指令與不同的數(shù)據(jù)做綁定。比如一個(gè) user-name 組件，該組件允許用戶輸入 firstName 和 lastName。該組件期望的使用方式如下：

<user-name 
  v-model:first-name="firstName" 
  v-model:last-name="lastName" 
></user-name> 

同樣，我們使用 Vue 3 Template Explorer 在線工具，先來看一下以上模板編譯后的結(jié)果：

const _Vue = Vue 
return function render(_ctx, _cache, $props, $setup, $data, $options) { 
  with (_ctx) { 
    const { resolveComponent: _resolveComponent, createVNode: _createVNode,  
      openBlock: _openBlock, createBlock: _createBlock } = _Vue 
 
    const _component_user_name = _resolveComponent("user-name") 
    return (_openBlock(), _createBlock(_component_user_name, { 
      "first-name": firstName, 
      "onUpdate:first-name": $event => (firstName = $event), 
      "last-name": lastName, 
      "onUpdate:last-name": $event => (lastName = $event) 
    }, null, 8 /* PROPS */, ["first-name", "onUpdate:first-name", "last-name", "onUpdate:last-name"])) 
  } 
} 

通過觀察以上的輸出結(jié)果，我們可知 v-model:first-name 和 v-model:last-name 都會(huì)生成對(duì)應(yīng)的 prop 屬性和自定義事件。HTML 中的 attribute 名是大小寫不敏感的，所以瀏覽器會(huì)把所有大寫字符解釋為小寫字符。這意味著當(dāng)你使用 DOM 中的模板時(shí)，camelCase （駝峰命名法）的 prop 名需要使用其等價(jià)的 kebab-case（短橫線分隔命名）命名。比如：

<!-- kebab-case in HTML --> 
<blog-post post-title="hello!"></blog-post> 
 
app.component('blog-post', { 
  props: ['postTitle'], 
  template: '<h3>{{ postTitle }}</h3>' 
}) 

反之，對(duì)于 first-name 和 last-name 屬性名來說，在定義 user-name 組件時(shí)，我們將使用 firstName 和 lastName 駝峰命名方式。

 <div id="app"> 
    <user-name 
       v-model:first-name="firstName" 
       v-model:last-name="lastName"> 
    </user-name> 
    Your name: {{firstName}} {{lastName}} 
</div> 
<script> 
   const { createApp } = Vue 
   const app = Vue.createApp({ 
     data() { 
       return { 
         firstName: "", 
         lastName: "" 
       } 
     } 
   }) 
   app.component('user-name', { 
     props: { 
       firstName: String, 
       lastName: String 
     }, 
     emits: ['update:firstName', 'update:lastName'], 
     template: ` 
       <input 
          type="text" 
          :value="firstName" 
          @input="$emit('update:firstName', $event.target.value)"> 
       <input 
          type="text" 
          :value="lastName" 
          @input="$emit('update:lastName', $event.target.value)"> 
      ` 
   }) 
   app.mount('#app') 
</script> 

在以上的代碼中，user-name 組件使用的自定義屬性和事件名都是駝峰的形式。很明顯與模板編譯后生成的命名格式不一致，那么以上的 user-name 組件可以正常工作么？答案是可以的，這是因?yàn)閷?duì)于自定義事件來說，在 emit 函數(shù)內(nèi)部會(huì)通過 hyphenate 函數(shù)，把事件名從 camelCase（駝峰命名法）的形式轉(zhuǎn)換為 kebab-case（短橫線分隔命名）的形式，即 hyphenate(event)：

// packages/runtime-core/src/componentEmits.ts 
export function emit( 
  instance: ComponentInternalInstance, 
  event: string, 
  ...rawArgs: any[] 
) { 
  // 省略部分代碼 
  // for v-model update:xxx events, also trigger kebab-case equivalent 
  // for props passed via kebab-case 
  if (!handler && isModelListener) { 
    handlerName = toHandlerKey(hyphenate(event)) 
    handler = props[handlerName] 
  } 
 
  if (handler) { 
    callWithAsyncErrorHandling( 
      handler, 
      instance, 
      ErrorCodes.COMPONENT_EVENT_HANDLER, 
      args 
    ) 
  } 
} 

而 hyphenate 函數(shù)的實(shí)現(xiàn)也很簡(jiǎn)單，具體如下所示：

// packages/shared/src/index.ts 
const hyphenateRE = /\B([A-Z])/g 
 
// cacheStringFunction 函數(shù)提供了緩存功能 
export const hyphenate = cacheStringFunction((str: string) => 
  str.replace(hyphenateRE, '-$1').toLowerCase() 
) 

3.3 如何為 v-model 添加自定義修飾符？

在前面阿寶哥已經(jīng)介紹了 v-model 的內(nèi)置修飾符：.trim、.number 和 .lazy。但在某些場(chǎng)景下，你可能希望自定義修飾符。在介紹如何自定義修飾符前，我們?cè)俅卫?Vue 3 Template Explorer 在線工具，看一下 v-model 使用內(nèi)置修飾符后，模板編譯的結(jié)果：

<custom-input v-model.lazy.number="searchText"></custom-input> 
 
const _Vue = Vue 
return function render(_ctx, _cache, $props, $setup, $data, $options) { 
  with (_ctx) { 
    const { resolveComponent: _resolveComponent, createVNode: _createVNode,  
      openBlock: _openBlock, createBlock: _createBlock } = _Vue 
 
    const _component_custom_input = _resolveComponent("custom-input") 
    return (_openBlock(), _createBlock(_component_custom_input, { 
      modelValue: searchText, 
      "onUpdate:modelValue": $event => (searchText = $event), 
      modelModifiers: { lazy: true, number: true } 
    }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"])) 
  } 
} 

通過觀察生成的渲染函數(shù)，我們可以看到 v-model 上添加的 .lazy 和 .number 修飾符，被編譯到 modelModifiers prop 屬性中。假設(shè)我們要為自定義一個(gè) capitalize 修飾符 ，該修飾符的作用是將 v-model 綁定字符串的第一個(gè)字母轉(zhuǎn)成大寫：

<custom-input v-model.capitalize="searchText"></custom-input> 
 
const _Vue = Vue 
return function render(_ctx, _cache, $props, $setup, $data, $options) { 
  with (_ctx) { 
    const { resolveComponent: _resolveComponent, createVNode: _createVNode,  
      openBlock: _openBlock, createBlock: _createBlock } = _Vue 
 
    const _component_custom_input = _resolveComponent("custom-input") 
    return (_openBlock(), _createBlock(_component_custom_input, { 
      modelValue: searchText, 
      "onUpdate:modelValue": $event => (searchText = $event), 
      modelModifiers: { capitalize: true } 
    }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"])) 
  } 
} 

很明顯 v-model 上的 .capitalize 修飾符，也被編譯到 modelModifiers prop 屬性中。了解完這些，我們就可以實(shí)現(xiàn)上述的修飾符，具體如下所示：

<div id="app"> 
   <custom-input v-model.capitalize="searchText"></custom-input> 
   <p>搜索的內(nèi)容：{{searchText}}</p> 
</div> 
<script> 
   const { createApp } = Vue 
   const app = Vue.createApp({ 
     data() { 
       return { 
         searchText: "" 
       } 
     } 
   }) 
   app.component('custom-input', { 
     props: { 
       modelValue: String, 
       modelModifiers: { 
         default: () => ({}) 
       } 
     }, 
     emits: ['update:modelValue'], 
     methods: { 
       emitValue(e) { 
         let value = e.target.value 
         if (this.modelModifiers.capitalize) { 
           value = value.charAt(0).toUpperCase() + value.slice(1) 
         } 
         this.$emit('update:modelValue', value) 
       } 
     }, 
     template: `<input 
       type="text" 
       :value="modelValue" 
       @input="emitValue">` 
   }) 
  app.mount('#app') 
</script> 

本文阿寶哥主要介紹了雙向綁定的概念和 Vue 3 中雙向綁定背后的原理。為了讓大家能夠更深入地掌握 v-model 的相關(guān)知識(shí)，阿寶哥從源碼的角度分析了 vModelText 指令的內(nèi)部實(shí)現(xiàn)。

此外，阿寶哥還介紹了在組件中如何使用多個(gè) v-model 指令及如何為 v-model 添加自定義修飾符。Vue 3.0 進(jìn)階系列的文章還在持續(xù)更新，感興趣的小伙伴請(qǐng)持續(xù)關(guān)注喲。

四、參考資源

Vue 3 官網(wǎng) - 自定義指令

Vue 3 官網(wǎng) - 自定義事件