面試官：只知道v-model是:modelValue和@onUpdate語法糖，那你可以走了

前言

我們每天都在用v-model，並且大家都知道在vue3中v-model是:modelValue和@update:modelValue的語法糖。那你知道v-model指令是如何變成元件上的modelValue屬性和@update:modelValue事件呢？將v-model指令轉換為modelValue屬性和@update:modelValue事件這一過程是在編譯時還是執行時進行的呢？

先說結論

下面這個是我畫的處理v-model指令的完整流程圖：

首先會呼叫parse函式將template模組中的程式碼轉換為AST抽象語法樹，此時使用v-model的node節點的props屬性中還是v-model。接著會呼叫transform函式，經過transform函式處理後在node節點中多了一個codegenNode屬性。在codegenNode屬性中我們看到沒有v-model指令，取而代之的是modelValue和onUpdate:modelValue屬性。經過transform函式處理後已經將v-model指令編譯為modelValue和onUpdate:modelValue屬性，此時還是AST抽象語法樹。所以接下來就是呼叫generate函式將AST抽象語法樹轉換為render函式，到此為止編譯時做的事情已經做完了，經過編譯時的處理v-model指令已經變成了modelValue和onUpdate:modelValue屬性。

接著就是執行時階段，在瀏覽器中執行render函式生成虛擬DOM。在生成虛擬DOM的過程中由於props屬性中有modelValue和onUpdate:modelValue屬性，所以就會給元件物件加上modelValue屬性和@update:modelValue事件。最後就是呼叫mount方法將虛擬DOM轉換為真實DOM。所以v-model指令轉換為modelValue屬性和@update:modelValue事件這一過程是在編譯時進行的。

什麼是編譯時？什麼是執行時？

vue是一個編譯時+執行時一起工作的框架，之前有小夥伴私信我說自己傻傻分不清楚在vue中什麼時候是編譯時，什麼時候是執行時。要回答小夥伴的這個問題我們要從一個vue檔案是如何渲染到瀏覽器視窗中說起。

我們的vue程式碼一般都是寫在字尾名為vue的檔案上，顯然瀏覽器是不認識vue檔案的，瀏覽器只認識html、css、jss等檔案型別。所以第一步就是透過webpack或者vite將一個vue檔案編譯為一個包含render函式的js檔案，在這一步中程式碼的執行環境是在nodejs中進行，也就是我們所說的編譯時。相比瀏覽器端來說能夠拿到的許可權更多，也能做更多的事情。後面就是執行render函式生成虛擬DOM，再呼叫瀏覽器的DOM API根據虛擬DOM生成真實DOM掛載到瀏覽器上。在第一步後面的這些過程中程式碼執行環境都是在瀏覽器中，也就是我們所說的執行時。在客戶端渲染的場景下，一句話總結就是：程式碼跑在nodejs端的時候就是編譯時，程式碼跑在瀏覽器端的時候就是執行時。

舉個例子

我們來看一個v-model的例子，父元件index.vue的程式碼如下：

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

<script setup lang="ts">
import { ref } from "vue";
import CommonChild from "./child.vue";

const inputValue = ref();
</script>

我們上面是一個很簡單的v-model的例子，在CommonChild子元件上使用v-model繫結一個叫inputValue的ref變數，然後將這個inputValue變數渲染到p標籤上面。

前面我們已經講過了客戶端渲染的場景下，在nodejs端工作的時候是編譯時，在瀏覽器端工作的時候是執行時。那我們現在先來看看經過編譯時階段處理後，剛剛進入到瀏覽器端執行時階段的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，如下圖所示：

這時有的小夥伴就開始疑惑了不是說好的瀏覽器不認識vue檔案嗎？怎麼這裡的檔名稱是index.vue而不是index.js呢？其實很簡單，在開發環境時index.vue檔案是在App.vue檔案中import匯入的，而App.vue檔案是在main.js檔案中import匯入的。所以當瀏覽器中執行main.js的程式碼時發現import匯入了App.vue檔案，那瀏覽器就會去載入App.vue檔案。當瀏覽器載入完App.vue檔案後執行時發現import匯入了index.vue檔案，所以瀏覽器就會去載入index.vue檔案，而不是index.js檔案。

至於什麼時候將index.vue檔案中的template模組、script模組、style模組編譯成js程式碼，我們在 透過debug搞清楚.vue檔案怎麼變成.js檔案文章中已經講過了當import載入一個檔案時會觸發@vitejs/plugin-vue包中的transform鉤子函式，在這個transform鉤子函式中會將template模組、script模組、style模組編譯成js程式碼。所以在瀏覽器中拿到的index.vue檔案就是經過編譯後的js程式碼了。

現在我們在瀏覽器的network中來看剛剛進入編譯時index.vue檔案程式碼，簡化後的程式碼如下：

import {
  Fragment as _Fragment,
  createElementBlock as _createElementBlock,
  createElementVNode as _createElementVNode,
  createVNode as _createVNode,
  defineComponent as _defineComponent,
  openBlock as _openBlock,
  toDisplayString as _toDisplayString,
  ref,
} from "/node_modules/.vite/deps/vue.js?v=23bfe016";
import CommonChild from "/src/components/vModel/child.vue?t=1710943659056";
import "/src/components/vModel/index.vue?vue&type=style&index=0&scoped=0ebe7d62&lang.css";

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

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return (
    _openBlock(),
    _createElementBlock(
      _Fragment,
      null,
      [
        _createVNode(
          $setup["CommonChild"],
          {
            modelValue: $setup.inputValue,
            "onUpdate:modelValue":
              _cache[0] ||
              (_cache[0] = ($event) => ($setup.inputValue = $event)),
          },
          null,
          8,
          ["modelValue"]
        ),
        _createElementVNode(
          "p",
          null,
          "input value is: " + _toDisplayString($setup.inputValue),
          1
          /* TEXT */
        ),
      ],
      64
      /* STABLE_FRAGMENT */
    )
  );
}

_sfc_main.render = _sfc_render;
export default _sfc_main;

從上面的程式碼中我們可以看到編譯後的js程式碼主要分為兩塊，第一塊是_sfc_main元件物件，裡面有name屬性和setup方法。一個vue元件在執行時實際就是一個物件，這裡的_sfc_main就是一個vue元件物件。至於defineComponent函式的作用是在定義 Vue 元件時提供型別推導的輔助函式，所以在我們這個場景沒什麼用。我們接著來看第二塊_sfc_render，從名字我想你應該已經猜到了他是一個render函式。執行這個_sfc_render函式就會生成虛擬DOM，然後再由虛擬DOM生成瀏覽器上面的真實DOM。

我們再來看這個render函式，在這個render函式前面會呼叫openBlock函式和createElementBlock函式。他的作用是在編譯時儘可能的提取多的關鍵資訊，可以減少執行時比較新舊虛擬DOM帶來的效能開銷，我們這篇文章不關注這點，所以我們接下來會直接看下面的_createVNode函式和_createElementVNode函式。

v-model語法糖怎麼工作的

我們接著來看render函式中的_createVNode函式和_createElementVNode函式，程式碼如下：

import {
  createElementVNode as _createElementVNode,
  createVNode as _createVNode,
} from "/node_modules/.vite/deps/vue.js?v=23bfe016";

_createVNode(
  $setup["CommonChild"],
  {
    modelValue: $setup.inputValue,
    "onUpdate:modelValue":
      _cache[0] ||
      (_cache[0] = ($event) => ($setup.inputValue = $event)),
  },
  null,
  8,
  ["modelValue"]
),
_createElementVNode(
  "p",
  null,
  "input value is: " + _toDisplayString($setup.inputValue),
  1
  /* TEXT */
),

從這兩個函式的名字我想你也能猜出來他們的作用是建立虛擬DOM，再仔細一看這兩個函式不就是對應的我們template模組中的這兩行程式碼嗎。

<CommonChild v-model="inputValue" />
<p>input value is: {{ inputValue }}</p>

第一個_createVNode函式對應的是CommonChild，第二個_createElementVNode對應的是p標籤。我們將重點放在_createVNode函式上，從import匯入來看_createVNode函式是從vue中匯出的createVNode函式。你是不是覺得createVNode這個名字比較熟悉呢，其實在 vue官網中有提到。

h() 是 hyperscript 的簡稱——意思是“能生成 HTML (超文字標記語言) 的 JavaScript”。這個名字來源於許多虛擬 DOM 實現預設形成的約定。一個更準確的名稱應該是 createVnode()，但當你需要多次使用渲染函式時，一個簡短的名字會更省力。

vue官網中h() 函式用於生成虛擬DOM，其實h()函式底層就是呼叫的createVnode函式。同樣的createVnode函式和h() 函式接收的引數也差不多，第一個引數可以是一個元件物件也可以是像p這樣的html標籤，也可以是一個虛擬DOM。第二個引數為給元件或者html標籤傳遞的props屬性或者attribute。第三個引數是該節點的children子節點。現在我們再來仔細看這個_createVNode函式你應該已經明白了：

_createVNode(
  $setup["CommonChild"],
  {
    modelValue: $setup.inputValue,
    "onUpdate:modelValue":
      _cache[0] ||
      (_cache[0] = ($event) => ($setup.inputValue = $event)),
  },
  null,
  8,
  ["modelValue"]
),

我們在 Vue 3 的 setup語法糖到底是什麼東西？文章中已經講過了render函式中的$setup變數就是setup函式的返回值經過Proxy處理後的物件，由於Proxy的攔截處理讓我們在template中使用ref變數時無需再寫.value。在上面的setup函式中我們看到CommonChild元件物件也在返回值物件中，所以這裡傳入給createVNode函式的第一個引數為CommonChild元件物件。

我們再來看第二個引數物件，物件中有兩個key，分別是modelValue和onUpdate:modelValue。這兩個key就是傳遞給CommonChild元件的兩個props，等等這裡有兩個問題。第一個問題是這裡怎麼是onUpdate:modelValue，我們知道的v-model是:modelValue和@update:modelValue的語法糖，不是說好的@update怎麼變成了onUpdate了呢？第二個問題是onUpdate:modelValue明顯是事件監聽而不是props屬性，怎麼是“透過props屬性”而不是“透過事件”傳遞給了CommonChild子元件呢？

因為在編譯時處理v-on事件監聽會將監聽的事件首字母變成大寫然後在前面加一個on，塞到props屬性物件中，所以這裡才是onUpdate:modelValue。所以在元件上不管是v-bind的attribute和prop，還是v-on事件監聽，經過編譯後都會被塞到一個大的props物件中。以on開頭的屬性我們都視作事件監聽，用於和普通的attribute和prop區分。所以你在元件上繫結一個onConfirm屬性，屬性值為一個handleClick的函式。在子元件中使用emit('confirm')是可以觸發handleClick函式的執行的，但是一般情況下還是不要這樣寫，維護程式碼的人會看著一臉矇蔽的。

我們接著來看傳遞給CommonChild元件的這兩個屬性值。

{
  modelValue: $setup.inputValue,
  "onUpdate:modelValue":
    _cache[0] ||
    (_cache[0] = ($event) => ($setup.inputValue = $event)),
}

第一個modelValue的屬性值是$setup.inputValue。前面我們已經講過了$setup.inputValue就是指向setup中定義的名為inputValue的ref變數，所以第一個屬性的作用就是給CommonChild元件新增:modelValue="inputValue"的屬性。

我們再來看第二個屬性onUpdate:modelValue，屬性值為_cache[0] ||(_cache[0] = ($event) => ($setup.inputValue = $event))。這裡為什麼要加一個_cache快取呢？原因是每次頁面重新整理都會重新觸發render函式的執行，如果不加快取那不就變成了每次執行render函式都會生成一個事件處理函式。這裡的事件處理函式也很簡單，接收一個$event變數然後賦值給setup中的inputValue變數。接收的$event變數就是我們在子元件中呼叫emit觸發事件傳過來的第二個變數，比如：emit('update:modelValue', 'helllo word')。為什麼是第二個變數呢？是因為emit函式接收的第一個變數為要觸發的事件名稱。所以第二個屬性的作用就是給CommonChild元件新增@update:modelValue的事件繫結。

編譯時如何處理v-model

前面我們已經講過了在執行時已經拿到了key為modelValue和onUpdate:modelValue的props屬性物件了，我們知道這個props屬性物件是在編譯時由v-model指令編譯而來的，那在這個編譯過程中是如何處理v-model指令的呢？請看下面編譯時的流程圖：

首先會呼叫parse函式將template模組中的程式碼轉換為AST抽象語法樹，此時使用v-model的node節點的props屬性中還是v-model。接著會呼叫transform函式，經過transform函式處理後在node節點中多了一個codegenNode屬性。在codegenNode屬性中我們看到沒有v-model指令，取而代之的是modelValue和onUpdate:modelValue屬性。經過transform函式處理後已經將v-model指令編譯為modelValue和onUpdate:modelValue屬性，此時還是AST抽象語法樹。所以接下來就是呼叫generate函式將AST抽象語法樹轉換為render函式，到此為止編譯時做的事情已經做完了。

parse函式

首先是使用parse函式將template模組中的程式碼編譯成AST抽象語法樹，在這個過程中會使用到大量的正規表示式對字串進行解析。我們直接來看編譯後的AST抽象語法樹是什麼樣子：

從上圖中我們可以看到使用v-model指令的node節點中有了name為model和rawName為v-model的props了，明顯可以看出將template中code程式碼字串轉換為AST抽象語法樹時沒有處理v-model指令。那麼什麼時候處理的v-model指令呢？

transform函式

其實是在後面的一個transform函式中處理的，在這個函式中主要呼叫的是traverseNode函式處理AST抽象語法樹。在traverseNode函式中會去遞迴的去處理AST抽象語法樹中的所有node節點，這也解釋了為什麼還要在transform函式中再抽取出來一個traverseNode函式。

我們再來思考一個問題，由於traverseNode函式會處理node節點的所有情況，比如v-model指令、v-for指令、v-on、v-bind。如果將這些的邏輯全部都放到traverseNode函式中，那traverseNode函式的體量將會是非常大的。所以抽取出來一個nodeTransforms的概念，這個nodeTransforms是一個陣列。裡面存了一組transform函式，用於處理node節點。每個transform函式都有自己獨有的作用，比如transformModel函式用於處理v-model指令，transformIf函式用於處理v-if指令。我們來看看經過transform函式處理後的AST抽象語法樹是什麼樣的：

從上圖中我們可以看到同一個使用v-model指令的node節點，經過transform函式處理後的和第一步經過parse函式處理後比起來node節點最外層多了一個codegenNode屬性。

我們接下來看看codegenNode屬性裡面是什麼樣的：

從上圖中我們可以看到在codegenNode中還有一個props屬性，在props屬性下面還有一個properties屬性。這個properties屬性是一個陣列，裡面就是存的是node節點經過transform函式處理後的props屬性的內容。我們看到properties陣列中的每一個item都有key和value屬性，我想你應該已經反應過來了，這個key和value分別對應的是props屬性中的屬性名和屬性值。從上圖中我們看到第一個屬性的屬性名key的值為modelValue，屬性值value為$setup.inputValue。這個剛好就對應上v-model指令編譯後的:modelValue="$setup.inputValue"。

我們再來接著看第二個屬性：

從上圖中我們同樣也可以看到第二個屬性的屬性名key的值為onUpdate:modelValue，屬性值value的值拼起來就是為一串箭頭函式，和我們前面編譯後的程式碼一模一樣。第二個屬性剛好就對應上v-model指令編譯後的@update:modelValue="($event) => ($setup.inputValue = $event)"。

從上面的分析我們看到經過transform函式的處理後已經將v-model指令處理為對應的程式碼了，接下來我們要做的事情就是呼叫generate函式將AST抽象語法樹轉換成render函式

generate函式

在generate函式中會遞迴遍歷AST抽象語法樹，然後生成對應的瀏覽器可執行的js程式碼。如下圖：

從上圖中我們可以看到經過generate函式處理後生成的render函式和我們之前在瀏覽器的network中看到的經過編譯後的index.vue檔案中的render函式一模一樣。這也證明了modelValue屬性和@update:modelValue事件塞到元件上是在編譯時進行的。

總結

現在我們可以回答前面提的兩個問題了：

• v-model指令是如何變成元件上的modelValue屬性和@update:modelValue事件呢？

  首先會呼叫parse函式將template模組中的程式碼轉換為AST抽象語法樹，此時使用v-model的node節點的props屬性中還是v-model。接著會呼叫transform函式，經過transform函式處理後在node節點中多了一個codegenNode屬性。在codegenNode屬性中我們看到沒有v-model指令，取而代之的是modelValue和onUpdate:modelValue屬性。經過transform函式處理後已經將v-model指令編譯為modelValue和onUpdate:modelValue屬性。其實在執行時onUpdate:modelValue屬性就是等同於@update:modelValue事件。接著就是呼叫generate函式，將AST抽象語法樹生成render函式。然後在瀏覽器中執行render函式時，將拿到的modelValue和onUpdate:modelValue屬性塞到元件物件上，所以在元件上就多了兩個modelValue屬性和@update:modelValue事件。

• 將v-model指令轉換為modelValue屬性和@update:modelValue事件這一過程是在編譯時還是執行時進行的呢？

  從上面的問題答案中我們可以知道將v-model指令轉換為modelValue屬性和@update:modelValue事件這一過程是在編譯時進行的。

在transform函式中是呼叫transformModel函式處理v-model指令，這篇文章沒有深入到transformModel函式原始碼內去講解。如果大家對transformModel函式的原始碼感興趣請在評論區留言或者給我發資訊，我會在後面的文章安排上。

關注公眾號：前端歐陽，解鎖我更多vue乾貨文章。還可以加我微信，私信我想看哪些vue原理文章，我會根據大家的反饋進行創作。