前言

面試官：vue3的v-model都用過吧，來講講。
粉絲：v-model其實就是一個文法糖，在編譯時v-model會被編譯成:modelValue屬性和@update:modelValue事件。一般在子元件中定義一個名為modelValue的props來接收父元件v-model傳遞的值，然後當子元件表單的值變化時再使用@update:modelValue抛出事件給父元件，由父元件來更新v-model綁定的變量。
面試官：你說的這個是在元件上面使用v-model，原生input上面也支援v-model，你來說說原生input上面使用v-model以及群組件上面使用v-model有什麼差別？
粉絲：啊，兩個不是一樣的嗎？都是:modelValue屬性和@update:modelValue事件的文法糖吖。
面試官：原生input标簽接收的是value屬性，監聽的是input或者change事件。你說v-model會編譯成:modelValue屬性，但是input标簽隻接收value屬性，那你傳的modelValue屬性input标簽怎麼接收的？同理你說v-model會編譯成監聽@update:modelValue事件，但是input标簽隻監聽input或者change事件，那你傳監聽的@update:modelValue事件又是怎麼觸發的呢？

先說答案

來看看我畫個這個流程圖，如下：

根據上面的流程圖，我們知道了在元件上面使用v-model和原生input上面使用v-model差別主要有三點：

元件上面的v-model編譯後會生成modelValue屬性和@update:modelValue事件。而在原生input上面使用v-model編譯後不會生成modelValue屬性，隻會生成onUpdate:modelValue回調函數和vModelText自定義指令。
在元件上面使用v-model，是由子元件中定義一個名為modelValue的props來接收父元件使用v-model綁定的變量，然後使用這個modelValue綁定到子元件的表單中。在原生input上面使用v-model，是由編譯後生成的vModelText自定義指令在mounted和beforeUpdate鈎子函數中去将v-model綁定的變量值更新到原生input輸入框的value屬性，以保證v-model綁定的變量值和input輸入框中的值始終一緻。
在元件上面使用v-model，是由子元件使用emit抛出@update:modelValue事件，在@update:modelValue的事件處理函數中去更新v-model綁定的變量。而在原生input上面使用v-model，是由編譯後生成的vModelText自定義指令在created鈎子函數中去監聽原生input标簽的input或者change事件。在事件回調函數中去手動調用onUpdate:modelValue回調函數，然後在回調函數中去更新v-model綁定的變量。

看個例子

下面這個是我寫的一個demo，代碼如下：

<template>
  <input v-model="msg" />
  <p>input value is: {{ msg }}</p>
</template>

<script setup lang="ts">
import { ref } from "vue";

const msg = ref();
</script>

上面的例子很簡單，在原生input标簽上面使用v-model綁定了msg變量。我們接下來看看編譯後的js代碼是什麼樣的，那麼問題來了怎麼找到編譯後的js代碼呢？

其實很簡單直接在network上面找到你的那個vue檔案就行了，比如我這裡的檔案是index.vue，那我隻需要在network上面找叫index.vue的檔案就行了。但是需要注意一下network上面有兩個index.vue的js請求，分别是template子產品+script子產品編譯後的js檔案，和style子產品編譯後的js檔案。

那怎麼區分這兩個index.vue檔案呢？很簡單，通過query就可以區分。由style子產品編譯後的js檔案的URL中有type=style的query，如下圖所示：

接下來我們來看看編譯後的index.vue，簡化的代碼如下：

import {
  Fragment as _Fragment,
  createElementBlock as _createElementBlock,
  createElementVNode as _createElementVNode,
  defineComponent as _defineComponent,
  openBlock as _openBlock,
  toDisplayString as _toDisplayString,
  vModelText as _vModelText,
  withDirectives as _withDirectives,
  ref,
} from "/node_modules/.vite/deps/vue.js?v=23bfe016";

const _sfc_main = _defineComponent({
  __name: "index",
  setup(__props, { expose: __expose }) {
    __expose();
    const msg = ref();
    const __returned__ = { msg };
    return __returned__;
  },
});

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return (
    _openBlock(),
    _createElementBlock(
      _Fragment,
      null,
      [
        _withDirectives(
          _createElementVNode(
            "input",
            {
              "onUpdate:modelValue":
                _cache[0] || (_cache[0] = ($event) => ($setup.msg = $event)),
            },
            null,
            512
          ),
          [[_vModelText, $setup.msg]]
        ),
        _createElementVNode(
          "p",
          null,
          "input value is: " + _toDisplayString($setup.msg),
          1
        ),
      ],
      64
    )
  );
}
_sfc_main.render = _sfc_render;
export default _sfc_main;

從上面的代碼中我們可以看到編譯後的js代碼主要分為兩塊。

第一塊是_sfc_main元件對象，裡面有name屬性和setup方法。一個vue元件其實就是一個對象，這裡的_sfc_main對象就是一個vue元件對象。

我們接着來看第二塊_sfc_render，從名字我想你應該已經猜到了他是一個render函數。執行這個_sfc_render函數就會生成虛拟DOM，然後再由虛拟DOM生成浏覽器上面的真實DOM。我們接下來主要看看這個render函數。

render函數

這個render函數前面會調用openBlock函數和createElementBlock函數。他的作用是在編譯時盡可能的提取多的關鍵資訊，可以減少運作時比較新舊虛拟DOM帶來的性能開銷。我們這篇文章不關注這點，是以就不細講了。

來看看裡層的數組，數組中有兩項。分别是withDirectives函數和createElementVNode函數，數組中的這兩個函數分别對應的就是template中的input标簽和p标簽。我們主要來關注input标簽，也就是withDirectives函數。

withDirectives函數

這個withDirectives是否覺得有點眼熟？他是vue提供的一個進階API，我們平時寫業務基本不會用到他。作用是給vnode（虛拟DOM）增加自定義指令。

接收兩個參數，第一個參數為需要添加指令的vnode，第二個參數是由自定義指令組成的二維數組。二維數組的第一層是表示有哪些自定義指令，第二層表示的是指令名稱、綁定值、參數、修飾符。第二層的結構為： [Directive, value, argument, modifiers] 。如果不需要，可以省略數組的尾元素。

舉個例子：

import { h, withDirectives } from 'vue'

// 一個自定義指令
const pin = {
  mounted() {
    /* ... */
  },
  updated() {
    /* ... */
  }
}

// <div v-pin:top.animate="200"></div>
const vnode = withDirectives(h('div'), [
  [pin, 200, 'top', { animate: true }]
])

上面這個例子定義了一個pin的自定義指令，調用h函數生成vnode傳給withDirectives函數的第一個參數。第二個參數自定義指令數組，我們這裡隻傳了一個pin自定義指令。來看看[Directive, value, argument, modifiers]。

第一個Directive字段：“指令名稱”對應的就是pin自定義指令。
第二個value字段：“指令值”對應的就是200。
第三個字段argument字段：“參數”對應的就是top參數。
第四個字段modifiers字段：“修飾符”對應的就是animate修飾符。

是以上面的withDirectives函數實際就是對應的<div v-pin:top.animate="200"></div>

createElementVNode函數

看見這個函數名字我想你應該也猜到了，作用是建立vnode（虛拟dom）。這個函數和vue提供的 h函數差不多，底層調用的都是一個名為createBaseVNode的函數。接收的第一個參數既可以是一個字元串 (用于原生元素) 也可以是一個 Vue 元件定義。接收的第二個參數是要傳遞的 prop，第三個參數是子節點。

舉個例子：

createElementVNode("input", {
  value: 12,
})

上面這個例子建立了一個input的vnode，輸入框中的值為12

搞清楚了withDirectives函數和createElementVNode函數的作用，我們回過頭來看之前對應input标簽的代碼你應該就很容易了解了。代碼如下：

_withDirectives(
  _createElementVNode(
    "input",
    {
      "onUpdate:modelValue":
        _cache[0] || (_cache[0] = ($event) => ($setup.msg = $event)),
    },
    null,
    512
  ),
  [[_vModelText, $setup.msg]]
)

調用withDirectives函數，傳入兩個參數。第一個參數為調用createElementVNode函數生成input的vnode。第二個參數為傳入的自定義指令組成的數組，很明顯這裡的二維數組的第一層隻有一項，說明隻傳入了一個自定義指令。

回憶一下前面說的二維數組中的第二層的結構： [Directive, value, argument, modifiers]，第一個字段Directive表示這裡傳入了一個名為vModelText的自定義指令，第二個字段value表示給vModelText指令綁定的值為$setup.msg。這裡的$setup.msg實際就是指向的是setup中定義的名為msg的ref變量。

我們再來看裡面的createElementVNode函數，建立一個input的vnode。傳入了一個名為onUpdate:modelValue的props屬性，屬性值是一個經過緩存的回調函數。

為什麼需要緩存呢？因為每次更新頁面都會執行一次render函數，每次執行render函數都會調用一次createElementVNode函數。如果不緩存那不就變成了每次更新頁面都會生成一個onUpdate:modelValue的回調函數。這裡的回調函數也很簡單，接收一個$event變量。這個$event變量就是輸入框中輸入的值，然後最新的輸入框中的值同步到setup中的msg變量。

總結一下就是給input标簽的vnode添加了一個vModelText的自定義指令，并且給指令綁定的值為msg變量。還有就是在input标簽的vnode中添加了一個onUpdate:modelValue的屬性，屬性值是一個回調函數，觸發這個回調函數就會将msg變量的值更新為輸入框中的最新值。我們知道input輸入框中的值對應的是value屬性，監聽的是input和change事件。那麼這裡有兩個問題：

如何将vModelText自定義指令綁定的msg變量的值傳遞給input輸入框中的value屬性的呢？
input标簽監聽input和change事件，編譯後input上面卻是一個名為onUpdate:modelValue的props回調函數？

要回答上面的兩個問題我們需要看vModelText自定義指令是什麼樣的。

vModelText自定義指令

vModelText是一個運作時的v-model指令，為什麼說是運作時呢？在編譯時就會将元件上面的v-model指令編譯成modelValue屬性和@update:modelValue事件。是以當運作時在元件上已經沒有了v-model指令了，隻有原生input在運作時依然還有v-model指令，也就是vModelText自定義指令。

我們來看看vModelText自定義指令的代碼：

const vModelText = {
  created(el, { modifiers: { lazy, trim, number } }, vnode) {
    // ...
  },
  mounted(el, { value }) {
    // ...
  },
  beforeUpdate(el, { value, modifiers: { lazy, trim, number } }, vnode) {
    // ...
  },
}

從上面可以看到vModelText自定義指令中使用了三個鈎子函數：created、mounted、beforeUpdate，我們來看看上面三個鈎子函數中使用到的參數：

el：指令綁定到的元素。這可以用于直接操作 DOM。
binding：一個對象，包含以下屬性。上面的例子中是直接解構了binding對象。

lazy：預設情況下，v-model 會在每次 input 事件後更新資料。你可以添加 lazy 修飾符來改為在每次 change 事件後更新資料，在input輸入框中就是失去焦點時再更新資料。
trim：去除使用者輸入内容中兩端的空格。
number：讓使用者輸入自動轉換為數字。
value：傳遞給指令的值。例如在 v-model="msg" 中，其中msg變量的值為“hello word”，value的值就是“hello word”。
modifiers：一個包含修飾符的對象，v-model支援lazy, trim, number這三個修飾符。

vnode：綁定元素的 VNode（虛拟DOM）。

mounted鈎子函數

我們先來看mounted鈎子函數，代碼如下：

const vModelText = {
  mounted(el, { value }) {
    el.value = value == null ? "" : value;
  },
}

mounted中的代碼很簡單，在mounted時如果v-model綁定的msg變量的值不為空，那麼就将msg變量的值同步到input輸入框中。

created鈎子函數

我們接着來看created鈎子函數中的代碼，如下：

const assignKey = Symbol("_assign");
const vModelText = {
  created(el, { modifiers: { lazy, trim, number } }, vnode) {
    el[assignKey] = getModelAssigner(vnode);
    const castToNumber =
      number || (vnode.props && vnode.props.type === "number");
    addEventListener(el, lazy ? "change" : "input", (e) => {
      if (e.target.composing) return;
      let domValue = el.value;
      if (trim) {
        domValue = domValue.trim();
      }
      if (castToNumber) {
        domValue = looseToNumber(domValue);
      }
      el[assignKey](domValue);
    });
    if (trim) {
      addEventListener(el, "change", () => {
        el.value = el.value.trim();
      });
    }
    if (!lazy) {
      addEventListener(el, "compositionstart", onCompositionStart);
      addEventListener(el, "compositionend", onCompositionEnd);
    }
  },
}

created鈎子函數中的代碼主要分為五部分。

第一部分

首先我們來看第一部分代碼：

el[assignKey] = getModelAssigner(vnode);

我們先來看這個getModelAssigner函數。代碼如下：

const getModelAssigner = (vnode) => {
const fn = vnode.props["onUpdate:modelValue"];
return isArray(fn) ? (value) => invokeArrayFns(fn, value) : fn;
};

getModelAssigner函數的代碼很簡單，就是傳回vnode上面名為onUpdate:modelValue的props回調函數。前面我們已經講過了執行這個回調函數會同步更新v-model綁定的msg變量。

是以第一部分代碼的作用就是取出input标簽上面名為onUpdate:modelValue的props回調函數，然後指派給input标簽對象的assignKey方法上面，後面再輸入框中的input或者chang事件觸發時會手動調用。這個assignKey是一個Symbol，唯一的辨別符。

第二部分

再來看第二部分代碼：

const castToNumber =
number || (vnode.props && vnode.props.type === "number");

castToNumber表示是否使用了.number修飾符，或者input輸入框上面是否有type=number的屬性。如果castToNumber的值為true，後續處理輸入框的值時會将其轉換成數字。

第三部分

我們接着來看第三部分的代碼：

addEventListener(el, lazy ? "change" : "input", (e) => {
if (e.target.composing) return;
let domValue = el.value;
if (trim) {
  domValue = domValue.trim();
}
if (castToNumber) {
  domValue = looseToNumber(domValue);
}
el[assignKey](domValue);
});

對input輸入框進行事件監聽，如果有.lazy修飾符就監聽change事件，否則監聽input事件。看看，這不就和.lazy修飾符的作用對上了嘛。.lazy修飾符的作用是在每次change事件觸發時再去更新資料。我們接着看裡面的事件處理函數，來看看第一行代碼：

if (e.target.composing) return;

當使用者使用拼音輸入法輸入漢字時，正在輸入拼音階段也會觸發input事件的。但是一般情況下我們隻希望真正合成漢字時才觸發input去更新資料，是以在輸入拼音階段觸發的input事件需要被return。至于e.target.composing什麼時候被設定為true，什麼時候又是false，我們接着會講。

後面的代碼就很簡單了，将輸入框中的值也就是el.value指派給domValue變量。如果使用了.trim修飾符，就執行trim方法，去除掉domValue變量中兩端的空格。

如果castToNumber的值為true，表示使用了.number修飾符或者在input上面使用了type=number。調用looseToNumber方法将domValue字元串轉換為數字。

最後将處理後的domValue，也就是處理後的輸入框中的輸入值，作為參數調用el[assignKey]方法。我們前面講過了el[assignKey]中存的就是input标簽上面名為onUpdate:modelValue的props回調函數，執行el[assignKey]方法就是執行回調函數，在回調函數中會将v-model綁定的msg變量的值更新為處理後的輸入框中的輸入值。

現在你知道了為什麼input标簽監聽input和change事件，編譯後input上面卻是一個名為onUpdate:modelValue的props回調函數了？

因為在input或者change事件的回調中會将輸入框的值根據傳入的修飾符進行處理，然後将處理後的輸入框的值作為參數手動調用onUpdate:modelValue回調函數，在回調函數中更新綁定的msg變量。

第四部分

我們接着來看第四部分的代碼，如下：

if (trim) {
  addEventListener(el, "change", () => {
    el.value = el.value.trim();
  });
}

這一塊代碼很簡單，如果使用了.trim修飾符，觸發change事件，在input輸入框中就是失去焦點時。就會将輸入框中的值也trim一下，去掉前後的空格。

為什麼需要有這塊代碼，前面在input或者change事件中不是已經對輸入框中的值進行trim處理了嗎？而且後面的beforeUpdate鈎子函數中也執行了el.value = newValue将輸入框中的值更新為v-model綁定的msg變量的值。

答案是：前面确實對輸入框中拿到的值進行trim處理，然後将trim處理後的值更新為v-model綁定的msg變量。但是我們并沒有将輸入框中的值更新為trim處理後的，雖然在beforeUpdate鈎子函數中會将輸入框中的值更新為v-model綁定的msg變量。但是如果隻是在輸入框的前後輸入空格，那麼經過trim處理後在beforeUpdate鈎子函數中就會認為輸入框中的值和msg變量的值相等。就不會執行el.value = newValue，此時輸入框中的值還是有空格的，是以需要執行第四部分的代碼将輸入框中的值替換為trim後的值。

第五部分

我們接着來看第五部分的代碼，如下：

if (!lazy) {
  addEventListener(el, "compositionstart", onCompositionStart);
  addEventListener(el, "compositionend", onCompositionEnd);
}

如果沒有使用.lazy修飾符，也就是在每次input時都會對綁定的變量進行更新。

這裡監聽的compositionstart事件是：文本合成系統如開始新的輸入合成時會觸發 compositionstart 事件。舉個例子：當使用者使用拼音輸入法開始輸入漢字時，這個事件就會被觸發。

這裡監聽的compositionend事件是：當文本段落的組成完成或取消時，compositionend 事件将被觸發。舉個例子：當使用者使用拼音輸入法，将輸入的拼音合成漢字時，這個事件就會被觸發。

來看看onCompositionStart中的代碼，如下：

function onCompositionStart(e) {
  e.target.composing = true;
}

代碼很簡單，将e.target.composing設定為true。還記得我們前面在input輸入框的input或者change事件中會先去判斷這個e.target.composing，如果其為true，那麼就return掉，這樣就不會在輸入拼音時也會更新v-model綁定的msg變量了。

我們來看看onCompositionEnd中的代碼，如下：

function onCompositionEnd(e) {
  const target = e.target;
  if (target.composing) {
    target.composing = false;
    target.dispatchEvent(new Event("input"));
  }
}

當将拼音合成漢字時會将e.target.composing設定為false，這裡為什麼要調用target.dispatchEvent手動觸發一個input事件呢？

答案是：将拼音合成漢字時input事件會比compositionend事件先觸發，由于此時的e.target.composing的值還是true，是以input事件中後續的代碼就會被return。是以才需要将e.target.composing重置為false後，手動觸發一個input事件，更新v-model綁定的msg變量。

beforeUpdate鈎子函數

我們接着來看看beforeUpdate鈎子函數，會在每次因為響應式狀态變更，導緻頁面更新之前調用，代碼如下：

const vModelText = {
  beforeUpdate(el, { value, modifiers: { lazy, trim, number } }, vnode) {
    el[assignKey] = getModelAssigner(vnode);
    // avoid clearing unresolved text. #2302
    if (el.composing) return;

    const elValue =
      number || el.type === "number" ? looseToNumber(el.value) : el.value;
    const newValue = value == null ? "" : value;

    if (elValue === newValue) {
      return;
    }

    if (document.activeElement === el && el.type !== "range") {
      if (lazy) {
        return;
      }
      if (trim && el.value.trim() === newValue) {
        return;
      }
    }

    el.value = newValue;
  },
};

看完了前面的created函數，再來看這個beforeUpdate函數就很簡單了。beforeUpdate鈎子函數最終要做的事情就是最後的這行代碼：

el.value = newValue;

這行代碼的意思是将輸入框中的值更新成v-model綁定的msg變量，為什麼需要在beforeUpdate鈎子函數中執行呢？

答案是msg是一個響應式變量，如果在父元件上面因為其他原因改變了msg變量的值後，這個時候就需要将input輸入框中的值同步更新為最新的msg變量。這也就解釋了我們前面的問題：如何将vModelText自定義指令綁定的msg變量的值傳遞給input輸入框中的value屬性的呢？

第一行代碼是：

el[assignKey] = getModelAssigner(vnode);

這裡再次将vnode上面名為onUpdate:modelValue的props回調函數指派給el[assignKey]，之前在created的時候不是已經指派過一次了嗎，這裡為什麼會再次指派呢？

答案是在有的場景中是不會緩存onUpdate:modelValue回調函數，如果沒有緩存，那麼每次執行render函數都會生成新的onUpdate:modelValue回調函數。是以才需要在beforeUpdate鈎子函數中每次都将最新的onUpdate:modelValue回調函數指派給el[assignKey]，當在input或者change事件觸發時執行el[assignKey]的時候就是執行的最新的onUpdate:modelValue回調函數。

再來看看第二行代碼，如下：

// avoid clearing unresolved text. #2302
if (el.composing) return;

這行代碼是為了修複bug：如果在輸入拼音的過程中，還沒有合成漢字之前。如果有其他的響應式變量的值變化導緻頁面重新整理，這種時候就應該return。否則由于此時的msg變量的值還是null，如果執行el.value = newValue，輸入框中的輸入值就會被清空。詳情請檢視issue： https://github.com/vuejs/core/issues/2302

後面的代碼就很簡單了，其中的document.activeElement屬性傳回獲得目前焦點（focus）的 DOM 元素，還有type = "range"我們平時基本不會使用。根據使用的修飾符拿到處理後的input輸入框中的值，然後和v-model綁定的msg變量進行比較。如果兩者相等自然不需要執行el.value = newValue将輸入框中的值更新為最新值。

總結

現在來看這個流程圖你應該就很容易了解了：

在元件上面使用v-model和原生input上面使用v-model差別主要有三點：

元件上面的v-model編譯後會生成modelValue屬性和@update:modelValue事件。而在原生input上面使用v-model編譯後不會生成modelValue屬性，隻會生成onUpdate:modelValue回調函數和vModelText自定義指令。（@update:modelValue事件其實等價于onUpdate:modelValue回調函數）
在元件上面使用v-model，是由子元件中定義一個名為modelValue的props來接收父元件使用v-model綁定的變量，然後使用這個modelValue綁定到子元件的表單中。在原生input上面使用v-model，是由編譯後生成的vModelText自定義指令在mounted和beforeUpdate鈎子函數中去将v-model綁定的變量值更新到原生input輸入框的value屬性，以保證v-model綁定的變量值和input輸入框中的值始終一緻。
在元件上面使用v-model，是由子元件使用emit抛出@update:modelValue事件，在@update:modelValue的事件處理函數中去更新v-model綁定的變量。而在原生input上面使用v-model，是由編譯後生成的vModelText自定義指令在created鈎子函數中去監聽原生input标簽的input或者change事件。在事件回調函數中去手動調用onUpdate:modelValue回調函數，然後在回調函數中去更新v-model綁定的變量。

面試官：在原生input上面使用v-model群組件上面使用有什麼差別？

前言

看個例子

render函數

withDirectives函數

createElementVNode函數

vModelText自定義指令

mounted鈎子函數

created鈎子函數

第一部分

第二部分

第三部分

第四部分

第五部分

beforeUpdate鈎子函數

總結

繼續閱讀

2024資料産品經理求職面試tips

面試名單公布

面試成功月薪15K變10K？HR質疑工資漲幅，如何應對突如其來的打擊

聯考：是對窮人最公平的一次機會；面試：則将窮人置于失敗的境地

不堪入目老照片：女演員面試，導演趁機猥亵

不堪入目老照片：女演員面試，導演趁機猥亵，

免筆試直接面試！即将報名

考研缺考明年能不能考？考上了為何不提供住宿？面試能不能取消？

澳洲商人假借面試，猥亵女子超過70人！被控多項罪名，下周出裁決

03後勇闖職場：重生之我用AI履歷去實習面試

某學生會主席面試華為，講自己最驕傲的事，陳珠芳：聽完我驚恐了

今年形勢好差，履歷投了一個月面試都沒有，完全感受不到金三銀四

總成績及面試公告

求職大資料：面試高校被拒？“第一學曆”表示不背鍋！

吐血整理，超級幹貨 | 公務員面試經驗分享

不堪入目老照片：女人面試被導演趁機猥亵，日本藝妓赤裸上身洗澡