前言

vue3.4增加了defineModel宏函數(shù)，在子組件內(nèi)修改了defineModel的返回值，父組件上v-model綁定的變量就會被更新。大家都知道v-model是:modelValue和@update:modelValue的語法糖，但是你知道為什么我們在子組件內(nèi)沒有寫任何關(guān)于props的定義和emit事件觸發(fā)的代碼嗎？還有在template渲染中defineModel的返回值等于父組件v-model綁定的變量值，那么這個返回值是否就是名為modelValue的props呢？直接修改defineModel的返回值就會修改父組件上面綁定的變量，那么這個行為是否相當(dāng)于子組件直接修改了父組件的變量值，破壞了vue的單向數(shù)據(jù)流呢？

先說答案

defineModel宏函數(shù)經(jīng)過編譯后會給vue組件對象上面增加modelValue的props選項(xiàng)和update:modelValue的emits選項(xiàng)，執(zhí)行defineModel宏函數(shù)的代碼會變成執(zhí)行useModel函數(shù)，如下圖：

圖片

經(jīng)過編譯后defineModel宏函數(shù)已經(jīng)變成了useModel函數(shù)，而useModel函數(shù)的返回值是一個ref對象。注意這個是ref對象不是props，所以我們才可以在組件內(nèi)直接修改defineModel的返回值。當(dāng)我們對這個ref對象進(jìn)行“讀操作”時，會像Proxy一樣被攔截到ref對象的get方法。在get方法中會返回本地維護(hù)localValue變量，localValue變量依靠watchSyncEffect讓localValue變量始終和父組件傳遞的modelValue的props值一致。

對返回值進(jìn)行“寫操作”會被攔截到ref對象的set方法中，在set方法中會將最新值同步到本地維護(hù)localValue變量，調(diào)用vue實(shí)例上的emit方法拋出update:modelValue事件給父組件，由父組件去更新父組件中v-model綁定的變量。如下圖：

圖片

所以在子組件內(nèi)無需寫任何關(guān)于props的定義和emit事件觸發(fā)的代碼，因?yàn)樵诰幾gdefineModel宏函數(shù)的時候已經(jīng)幫我們生成了modelValue的props選項(xiàng)。在對返回的ref變量進(jìn)行寫操作時會觸發(fā)set方法，在set方法中會調(diào)用vue實(shí)例上的emit方法拋出update:modelValue事件給父組件。

defineModel宏函數(shù)的返回值是一個ref變量，而不是一個props。所以我們可以直接修改defineModel宏函數(shù)的返回值，父組件綁定的變量之所以會改變是因?yàn)樵诘讓訒伋鰑pdate:modelValue事件給父組件，由父組件去更新綁定的變量，這一行為當(dāng)然滿足vue的單向數(shù)據(jù)流。

什么是vue的單向數(shù)據(jù)流

vue的單向數(shù)據(jù)流是指，通過props將父組件的變量傳遞給子組件，在子組件中是沒有權(quán)限去修改父組件傳遞過來的變量。只能通過emit拋出事件給父組件，讓父組件在事件回調(diào)中去修改props傳遞的變量，然后通過props將更新后的變量傳遞給子組件。在這一過程中數(shù)據(jù)的流動是單向的，由父組件傳遞給子組件，只有父組件有數(shù)據(jù)的更改權(quán)，子組件不可直接更改數(shù)據(jù)。

圖片

一個defineModel的例子

我在前面的 一文搞懂 Vue3 defineModel 雙向綁定：告別繁瑣代碼！文章中已經(jīng)講過了defineModel的各種用法，在這篇文章中我們就不多余贅述了。我們直接來看一個簡單的defineModel的例子。

下面這個是父組件的代碼：

<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指令將inputValue變量傳遞給子組件。然后在父組件上使用p標(biāo)簽渲染出inputValue變量的值。

我們接下來看子組件的代碼：

<template>
  <input v-model="model" />
  <button @click="handelReset">reset</button>
</template>

<script setup lang="ts">
const model = defineModel();

function handelReset() {
  model.value = "init";
}
</script>

子組件內(nèi)的代碼也很簡單，將defineModel的返回值賦值給model變量。然后使用v-model指令將model變量綁定到子組件的input輸入框上面。并且還在按鈕的click事件時使用model.value = "init"將綁定的值重置為init字符串。請注意在子組件中我們沒有任何定義props的代碼，也沒有拋出emit事件的代碼。而是通過defineModel宏函數(shù)的返回值來接收父組件傳過來的名為modelValue的prop，并且在子組件中是直接通過給defineModel宏函數(shù)的返回值進(jìn)行賦值來修改父組件綁定的inputValue變量的值。

defineModel編譯后的樣子

要回答前面提的幾個問題，我們還是得從編譯后的子組件代碼說起。下面這個是經(jīng)過簡化編譯后的子組件代碼：

import {
  defineComponent as _defineComponent,
  useModel as _useModel
} from "/node_modules/.vite/deps/vue.js?v=23bfe016";

const _sfc_main = _defineComponent({
  __name: "child",
  props: {
    modelValue: {},
    modelModifiers: {},
  },
  emits: ["update:modelValue"],
  setup(__props) {
    const model = _useModel(__props, "modelValue");
    function handelReset() {
      model.value = "init";
    }
    const __returned__ = { model, handelReset };
    return __returned__;
  },
});

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return (
    // ... 省略
  );
}
_sfc_main.render = _sfc_render;
export default _sfc_main;

從上面我們可以看到編譯后主要有_sfc_main和_sfc_render這兩塊，其中_sfc_render為render函數(shù)，不是我們這篇文章關(guān)注的重點(diǎn)。我們來主要看_sfc_main對象，看這個對象的樣子有name、props、emits、setup屬性，我想你也能夠猜出來他就是vue的組件對象。從組件對象中我們可以看到已經(jīng)有了一個modelValue的props屬性，還有使用emits選項(xiàng)聲明了update:modelValue事件。我們在源代碼中沒有任何地方有定義props和emits選項(xiàng)，很明顯這兩個是通過編譯defineModel宏函數(shù)而來的。

我們接著來看里面的setup函數(shù)，可以看到經(jīng)過編譯后的setup函數(shù)中代碼和我們的源代碼很相似。只有defineModel不在了，取而代之的是一個useModel函數(shù)。

// 編譯前的代碼
const model = defineModel();

// 編譯后的代碼
const model = _useModel(__props, "modelValue");

還是同樣的套路，在瀏覽器的sources面板上面找到編譯后的js文件，然后給這個useModel打個斷點(diǎn)。至于如何找到編譯后的js文件我們在前面的文章中已經(jīng)講了很多遍了，這里就不贅述了。刷新瀏覽器我們看到斷點(diǎn)已經(jīng)走到了使用useModel函數(shù)的地方，我們這里給useModel函數(shù)傳了兩個參數(shù)。第一個參數(shù)為子組件接收的props對象，第二個參數(shù)是寫死的字符串modelValue。進(jìn)入到useModel函數(shù)內(nèi)部，簡化后的useModel函數(shù)是這樣的：

function useModel(props, name) {
  const i = getCurrentInstance();
  const res = customRef((track2, trigger2) => {
    watchSyncEffect(() => {
      // 省略
    });
  });
  return res;
}

從上面的代碼中我們可以看到useModel中使用到的函數(shù)沒有一個是vue內(nèi)部源碼專用的函數(shù)，全都是調(diào)用的vue暴露出來的API。這意味著我們可以參考defineModel的實(shí)現(xiàn)源碼，也就是useModel函數(shù)，然后根據(jù)自己實(shí)際情況改良一個適合自己項(xiàng)目的defineModel函數(shù)。

我們先來簡單介紹一下useModel函數(shù)中使用到的API，分別是getCurrentInstance、customRef、watchSyncEffect，這三個API都是從vue中import導(dǎo)入的。

getCurrentInstance函數(shù)

首先來看看getCurrentInstance函數(shù)，他的作用是返回當(dāng)前的vue實(shí)例。為什么要調(diào)用這個函數(shù)呢？因?yàn)樵趕etup中this是拿不到vue實(shí)例的，后面對值進(jìn)行寫操作時會調(diào)用vue實(shí)例上面的emit方法拋出update事件。

watchSyncEffect函數(shù)

接著我們來看watchSyncEffect函數(shù)，這個API大家平時應(yīng)該比較熟悉了。他的作用是立即運(yùn)行一個函數(shù)，同時響應(yīng)式地追蹤其依賴，并在依賴更改時立即重新執(zhí)行這個函數(shù)。

比如下面這段代碼，會立即執(zhí)行console，當(dāng)count變量的值改變后，也會立即執(zhí)行console。

const count = ref(0)

watchSyncEffect(() => console.log(count.value))
// -> 輸出 0

customRef函數(shù)

最后我們來看customRef函數(shù)，他是useModel函數(shù)的核心。這個函數(shù)小伙伴們應(yīng)該用的比較少，我們這篇文章只簡單講講他的用法即可。如果小伙伴們對customRef函數(shù)感興趣可以留言或者給我發(fā)消息，關(guān)注的小伙伴們多了我后面會安排一篇文章來專門講customRef函數(shù)。官方的解釋為：

“

創(chuàng)建一個自定義的 ref，顯式聲明對其依賴追蹤和更新觸發(fā)的控制方式。customRef() 預(yù)期接收一個工廠函數(shù)作為參數(shù)，這個工廠函數(shù)接受 track 和 trigger 兩個函數(shù)作為參數(shù)，并返回一個帶有 get 和 set 方法的對象。

這句話的意思是customRef函數(shù)的返回值是一個ref對象。當(dāng)我們對返回值ref對象進(jìn)行“讀操作”時，會被攔截到ref對象的get方法中。當(dāng)我們對返回值ref對象進(jìn)行“寫操作”時，會被攔截到ref對象的set方法中。和Promise相似同樣接收一個工廠函數(shù)作為參數(shù)，Promise的工廠函數(shù)是接收的resolve和reject兩個函數(shù)作為參數(shù)，customRef的工廠函數(shù)是接收的track和trigger兩個函數(shù)作為參數(shù)。track用于手動進(jìn)行依賴收集，trigger函數(shù)用于手動進(jìn)行依賴觸發(fā)。

我們知道vue的響應(yīng)式原理是由依賴收集和依賴觸發(fā)的方式實(shí)現(xiàn)的，比如我們在template中使用一個ref變量。當(dāng)template被編譯為render函數(shù)后，在瀏覽器中執(zhí)行render函數(shù)時，就會對ref變量進(jìn)行讀操作。讀操作會被攔截到Proxy的get方法中，由于此時在執(zhí)行render函數(shù)，所以當(dāng)前的依賴就是render函數(shù)。在get方法中會進(jìn)行依賴收集，將當(dāng)前的render函數(shù)作為依賴收集起來。注意這里的依賴收集是vue內(nèi)部自動完成的，在我們的代碼中無需手動去進(jìn)行依賴收集。

當(dāng)我們對ref變量進(jìn)行寫操作時，此時會被攔截到Proxy的set方法，在set方法中會將收集到的依賴依次取出來執(zhí)行，我們前面收集的依賴是render函數(shù)。所以render函數(shù)就會重新執(zhí)行，執(zhí)行render函數(shù)生成虛擬DOM，再生成真實(shí)DOM，這樣瀏覽器中渲染的就是最新的ref變量的值。同樣這里依賴觸發(fā)也是在vue內(nèi)部自動完成的，在我們的代碼中無需手動去觸發(fā)依賴。

搞清楚了依賴收集和依賴觸發(fā)現(xiàn)在來講track和trigger兩個函數(shù)你應(yīng)該就能很容易理解了，track和trigger兩個函數(shù)可以讓我們手動控制什么時候進(jìn)行依賴收集和依賴觸發(fā)。執(zhí)行track函數(shù)就會手動收集依賴，執(zhí)行trigger函數(shù)就會手動觸發(fā)依賴，進(jìn)行頁面刷新。在defineModel這個場景中track手動收集的依賴就是render函數(shù)，trigger手動觸發(fā)會導(dǎo)致render函數(shù)重新執(zhí)行，進(jìn)而完成頁面刷新。

useModel函數(shù)

現(xiàn)在我們可以來看useModel函數(shù)了，簡化后的代碼如下：

function useModel(props, name) {
  const i = getCurrentInstance();

  const res = customRef((track2, trigger2) => {
    let localValue;
    watchSyncEffect(() => {
      const propValue = props[name];
      if (hasChanged(localValue, propValue)) {
        localValue = propValue;
        trigger2();
      }
    });
    return {
      get() {
        track2();
        return localValue;
      },
      set(value) {
        if (hasChanged(value, localValue)) {
          localValue = value;
          trigger2();
        }
        i.emit(`update:${name}`, value);
      },
    };
  });
  return res;
}

從上面我們可以看到useModel函數(shù)的代碼其實(shí)很簡單，useModel的返回值就是customRef函數(shù)的返回值，也就是一個ref變量對象。我們看到返回值對象中有g(shù)et和set方法，還有在customRef函數(shù)中使用了watchSyncEffect函數(shù)。

get方法

在前面的demo中，我們在子組件的template中使用v-model將defineModel的返回值綁定到一個input輸入框中。代碼如下：

<input v-model="model" />

在第一次執(zhí)行render函數(shù)時會對model變量進(jìn)行讀操作，而model變量是defineModel宏函數(shù)的返回值。編譯后我們看到defineModel宏函數(shù)變成了useModel函數(shù)。所以對model變量進(jìn)行讀操作，其實(shí)就是對useModel函數(shù)的返回值進(jìn)行讀操作。我們看到useModel函數(shù)的返回值是一個自定義ref，在自定義ref中有g(shù)et和set方法，當(dāng)對自定義ref進(jìn)行讀操作時會被攔截到ref對象中的get方法。這里在get方法中會手動執(zhí)行track2方法進(jìn)行依賴收集。因?yàn)榇藭r是在執(zhí)行render函數(shù)，所以收集到的依賴就是render函數(shù)，然后將本地維護(hù)的localValue的值進(jìn)行攔截返回。

set方法

在我們前面的demo中，子組件reset按鈕的click事件中會對defineModel的返回值model變量進(jìn)行寫操作，代碼如下：

function handelReset() {
  model.value = "init";
}

和對model變量“讀操作”同理，對model變量進(jìn)行“寫操作”也會被攔截到返回值ref對象的set方法中。在set方法中會先判斷新的值和本地維護(hù)的localValue的值比起來是否有修改。如果有修改那就將更新后的值同步更新到本地維護(hù)的localValue變量，這樣就保證了本地維護(hù)的localValue始終是最新的值。然后執(zhí)行trigger2函數(shù)手動觸發(fā)收集的依賴，在前面get的時候收集的依賴是render函數(shù)，所以這里觸發(fā)依賴會重新執(zhí)行render函數(shù)，然后將最新的值渲染到瀏覽器上面。

在set方法中接著會調(diào)用vue實(shí)例上面的emit方法進(jìn)行拋出事件，代碼如下：

i.emit(`update:${name}`, value)

這里的i就是getCurrentInstance函數(shù)的返回值。前面我們講過了getCurrentInstance函數(shù)的返回值是當(dāng)前vue實(shí)例，所以這里就是調(diào)用vue實(shí)例上面的emit方法向父組件拋出事件。這里的name也就是調(diào)用useModel函數(shù)時傳入的第二個參數(shù)，我們來回憶一下前面是怎樣調(diào)用useModel函數(shù)的 ，代碼如下：

const model = _useModel(__props, "modelValue")

傳入的第一個參數(shù)為當(dāng)前的props對象，第二個參數(shù)是寫死的字符串"modelValue"。那這里調(diào)用emit拋出的事件就是update:modelValue，傳遞的參數(shù)為最新的value的值。這就是為什么不需要在子組件中使用使用emit拋出事件，因?yàn)樵赿efineModel宏函數(shù)編譯成的useModel函數(shù)中已經(jīng)幫我們使用emit拋出事件了。

watchSyncEffect函數(shù)

我們接著來看子組件中怎么接收父組件傳遞過來的props呢，答案就在watchSyncEffect函數(shù)中?；貞浺幌虑懊嬷v過的useModel函數(shù)中的watchSyncEffect代碼如下：

function useModel(props, name) {
  const res = customRef((track2, trigger2) => {
    let localValue;
    watchSyncEffect(() => {
      const propValue = props[name];
      if (hasChanged(localValue, propValue)) {
        localValue = propValue;
        trigger2();
      }
    });
    return {
     // ...省略
    };
  });
  return res;
}

這個name也就是調(diào)用useModel函數(shù)時傳過來的第二個參數(shù)，我們前面已經(jīng)講過了是一個寫死的字符串"modelValue"。那這里的const propValue = props[name]就是取父組件傳遞過來的名為modelValue的prop，我們知道v-model就是:modelValue的語法糖，所以這個propValue就是取的是父組件v-model綁定的變量值。如果本地維護(hù)的localValue變量的值不等于父組件傳遞過來的值，那么就將本地維護(hù)的localValue變量更新，讓localValue變量始終和父組件傳遞過來的值一樣。并且觸發(fā)依賴重新執(zhí)行子組件的render函數(shù)，將子組件的最新變量的值更新到瀏覽器中。為什么要調(diào)用trigger2函數(shù)呢？原因是可以在子組件的template中渲染defineModel函數(shù)的返回值，也就是父組件傳遞過來的prop變量。如果父組件傳遞過來的prop變量值改變后不重新調(diào)用trigger2函數(shù)以重新執(zhí)行render函數(shù)，那么子組件中的渲染的變量值就一直都是舊的值了。因?yàn)檫@個是在watchSyncEffect內(nèi)執(zhí)行的，所以每次父組件傳過來的props值變化后都會再執(zhí)行一次，讓本地維護(hù)的localValue變量的值始終等于父組件傳遞過來的值，并且子組件頁面上也始終渲染的是最新的變量值。

這就是為什么在子組件中沒有任何props定義了，因?yàn)樵赿efineModel宏函數(shù)編譯后會給vue組件對象塞一個modelValue的prop，并且在useModel函數(shù)中會維護(hù)一個名為localValue的本地變量接收父組件傳遞過來的props.modelValue，并且讓localValue變量和props.modelValue的值始終保持一致。

總結(jié)

現(xiàn)在我們可以回答前面提的幾個問題了：

• 使用defineModel宏函數(shù)后，為什么我們在子組件內(nèi)沒有寫任何關(guān)于props定義的代碼？答案是本地會維護(hù)一個localValue變量接收父組件傳遞過來的名為modelValue的props。調(diào)用defineModel函數(shù)的代碼經(jīng)過編譯后會變成一個調(diào)用useModel函數(shù)的代碼，useModel函數(shù)的返回值是一個ref對象。當(dāng)我們對defineModel的返回值進(jìn)行“讀操作”時，類似于Proxy的get方法一樣會對讀操作進(jìn)行攔截到返回值ref對象的get方法中。而get方法的返回值為本地維護(hù)的localValue變量，在watchSyncEffect的回調(diào)中將父組件傳遞過來的名為modelValue的props賦值給本地維護(hù)的localValue變量。并且由于是在watchSyncEffect中，所以每次props改變都會執(zhí)行這個回調(diào)，所以本地維護(hù)的localValue變量始終是等于父組件傳遞過來的modelValue。也正是因?yàn)閐efineModel宏函數(shù)的返回值是一個ref對象而不是一個prop，所以我們可以在子組件內(nèi)直接將defineModel的返回值使用v-model綁定到子組件input輸入框上面。
• 使用defineModel宏函數(shù)后，為什么我們在子組件內(nèi)沒有寫任何關(guān)于emit事件觸發(fā)的代碼？答案是因?yàn)檎{(diào)用defineModel函數(shù)的代碼經(jīng)過編譯后會變成一個調(diào)用useModel函數(shù)的代碼，useModel函數(shù)的返回值是一個ref對象。當(dāng)我們直接修改defineModel的返回值，也就是修改useModel函數(shù)的返回值。類似于Proxy的set方法一樣會對寫行為進(jìn)行攔截到ref對象中的set方法中。在set方法中會手動觸發(fā)依賴，render函數(shù)就會重新執(zhí)行，瀏覽器上就會渲染最新的變量值。然后調(diào)用vue實(shí)例上的emit方法，向父組件拋出update:modelValue事件。并且將最新的值隨著事件一起傳遞給父組件，由父組件在update:modelValue事件回調(diào)中將父組件中v-model綁定的變量更新為最新值。
• 在template渲染中defineModel的返回值等于父組件v-model綁定的變量值，那么這個返回值是否就是名為modelValue的props呢？從第一個回答中我們知道defineModel的返回值不是props，而是一個ref對象。
• 直接修改defineModel的返回值就會修改父組件上面綁定的變量，那么這個行為是否相當(dāng)于子組件直接修改了父組件的變量值，破壞了vue的單向數(shù)據(jù)流呢？修改defineModel的返回值，就會更新父組件中v-model綁定的變量值。看著就像是子組件中直接修改了父組件的變量值，從表面上看著像是打破了vue的單向數(shù)據(jù)流。實(shí)則并不是那樣的，雖然我們在代碼中沒有寫過emit拋出事件的代碼，但是在defineModel函數(shù)編譯成的useModel函數(shù)中已經(jīng)幫我們使用emit拋出事件了。所以并沒有打破vue的單向數(shù)據(jù)流