前言

眾所周知，vue3的template中使用ref變量無需使用.value。還可以在事件處理器中進(jìn)行賦值操作時(shí)，無需使用.value就可以直接修改ref變量的值，比如：<button @click="msg = 'Hello Vue3'">change msg</button>。你猜vue是在編譯時(shí)就已經(jīng)在代碼中生成了.value，還是運(yùn)行時(shí)使用Proxy攔截的方式去實(shí)現(xiàn)的呢？注：本文中使用的vue版本為3.4.19。

看個(gè)demo

看個(gè)簡(jiǎn)單的demo，代碼如下：

<template>
  <p>{{ msg }}</p>
  <button @click="msg = 'Hello Vue3'">change msg</button>
</template>

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

const msg = ref("Hello World");

console.log(msg.value);
</script>

上面的代碼很簡(jiǎn)單，在script中想要訪問msg變量的值需要使用msg.value。但是在template中將msg變量渲染到p標(biāo)簽上面時(shí)就是直接使用{{ msg }}，在click的事件處理器中給msg變量賦新的值時(shí)也沒有使用到.value。

然后在瀏覽器中找到上面這個(gè)vue文件編譯后的樣子，在之前的文章中已經(jīng)講過很多次如何在瀏覽器中查看編譯后的vue文件，這篇文章就不贅述了。編譯后的代碼如下：

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

const _sfc_main = _defineComponent({
  __name: "index",
  setup() {
    const msg = ref("Hello World");
    console.log(msg.value);
    const __returned__ = { msg };
    return __returned__;
  },
});

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return (
    _openBlock(),
    _createElementBlock(
      _Fragment,
      null,
      [
        _createElementVNode("p", null, _toDisplayString($setup.msg), 1),
        _createElementVNode(
          "button",
          {
            onClick:
              _cache[0] ||
              (_cache[0] = ($event) => ($setup.msg = "Hello Vue3")),
          },
          "change msg"
        ),
      ],
      64
    )
  );
}
_sfc_main.render = _sfc_render;
export default _sfc_main;

vue文件編譯后的代碼主要分為兩塊：_sfc_main和_sfc_render。

• _sfc_main中主要是setup方法，這個(gè)是vue的<script setup lang="ts">部分編譯后的樣子。從上面可以看到在編譯后的setup方法中，訪問msg變量時(shí)依然使用了msg.value，并且在setup方法中return了{(lán) msg }對(duì)象。
• _sfc_render就是我們熟悉的render函數(shù)，在render函數(shù)中渲染p標(biāo)簽部分的內(nèi)容是：_toDisplayString($setup.msg)。很明顯這個(gè)toDisplayString就是一個(gè)將輸入值轉(zhuǎn)換為字符串的函數(shù)，并沒有處理.value。$setup.msg中的$setup.，我想你猜到了應(yīng)該和前面這個(gè)setup方法中return的{ msg }對(duì)象有關(guān)，但是又不是直接使用setup方法中return的{ msg }對(duì)象，因?yàn)槭褂胹etup中的msg變量需要使用.value，在編譯后的render函數(shù)中并沒有幫我們自動(dòng)生成一個(gè).value，比如這樣的代碼：$setup.msg.value。同樣的在render函數(shù)中，button的click事件給msg變量賦值時(shí)也沒有幫我們生成一個(gè)類似于這樣的代碼：$setup.msg.value = "Hello Vue3"，而是$setup.msg = "Hello Vue3"。從render函數(shù)中可以看出在template中使用ref變量無需使用.value，并不是編譯時(shí)就已經(jīng)在代碼中生成了.value，比如$setup.msg.value，而是通過Proxy的方式去實(shí)現(xiàn)的。

render函數(shù)

在render函數(shù)中讀和寫msg變量都變成了$setup.msg，而這個(gè)$setup對(duì)象又是調(diào)用render函數(shù)時(shí)傳入的第四個(gè)參數(shù)?，F(xiàn)在我們需要搞清楚調(diào)用render函數(shù)時(shí)傳入的第四個(gè)參數(shù)到底是什么？給render函數(shù)打一個(gè)斷點(diǎn)，刷新頁面，此時(shí)代碼走到了斷點(diǎn)里面，如下圖：

圖片

右邊的Call Stack表示當(dāng)前函數(shù)的調(diào)用鏈，從調(diào)用鏈中可以看到render函數(shù)是由一個(gè)名為renderComponentRoot的函數(shù)調(diào)用的。

點(diǎn)擊Call Stack中的renderComponentRoot，代碼會(huì)跳轉(zhuǎn)到renderComponentRoot函數(shù)中，在我們這個(gè)場(chǎng)景中簡(jiǎn)化后的renderComponentRoot函數(shù)代碼如下：

function renderComponentRoot(instance) {
  const {
    props,
    data,
    setupState,
    render: render2,
    // 省略...
  } = instance;

  render2.call(
    thisProxy,
    proxyToUse,
    renderCache,
    props,
    setupState,
    data,
    ctx
  );
}

這里的render2也就是我們的render函數(shù)，由于使用了.call，所以調(diào)用render函數(shù)時(shí)傳入的第四個(gè)參數(shù)為setupState對(duì)象。而setupState對(duì)象的值又是從instance.setupState而來的。

通過debug調(diào)試render函數(shù)我們發(fā)現(xiàn)，在render函數(shù)中渲染msg變量是使用$setup.msg，而$setup對(duì)象的值是從instance.setupState對(duì)象上面來的。

前面講過了編譯后的setup方法會(huì)返回一個(gè)包含msg屬性的對(duì)象，而這個(gè)$setup對(duì)象也就是instance.setupState肯定是和setup方法返回的對(duì)象有關(guān)系的。所以接下來我們需要去debug調(diào)試setup方法搞清楚他們到底是什么關(guān)系。

setup方法

將render函數(shù)中的斷點(diǎn)去掉，然后給setup方法打一個(gè)斷點(diǎn)。刷新頁面，此時(shí)代碼會(huì)走到斷點(diǎn)中，如下圖：

同理在Call Stack中可以看到調(diào)用setup方法的是callWithErrorHandling函數(shù)，點(diǎn)擊Call Stack中的callWithErrorHandling，代碼會(huì)跳轉(zhuǎn)到callWithErrorHandling函數(shù)中。代碼如下：

function callWithErrorHandling(fn, instance, type, args) {
  try {
    return args ? fn(...args) : fn();
  } catch (err) {
    handleError(err, instance, type);
  }
}

從上面可以看到在callWithErrorHandling函數(shù)中只是進(jìn)行了錯(cuò)誤處理，并不是我們想要找的。

setupStatefulComponent函數(shù)

從Call Stack中可以看到調(diào)用callWithErrorHandling函數(shù)的是setupStatefulComponent函數(shù)，點(diǎn)擊Call Stack中的setupStatefulComponent，代碼會(huì)跳轉(zhuǎn)到setupStatefulComponent函數(shù)中。在我們這個(gè)場(chǎng)景中簡(jiǎn)化后的setupStatefulComponent函數(shù)代碼如下：

function setupStatefulComponent(instance) {
  const Component = instance.type;
  const { setup } = Component;
  const setupResult = callWithErrorHandling(setup, instance);
  handleSetupResult(instance, setupResult);
}

從上面的代碼可以看到確實(shí)是使用callWithErrorHandling函數(shù)執(zhí)行了setup方法，并且還將setup方法的返回值對(duì)象賦值給了setupResult變量。然后以instance（vue實(shí)例）和setupResult（setup方法的返回值）為參數(shù)，調(diào)用了handleSetupResult函數(shù)。

handleSetupResult函數(shù)

將斷點(diǎn)走進(jìn)handleSetupResult函數(shù)，在我們這個(gè)場(chǎng)景中簡(jiǎn)化后的handleSetupResult函數(shù)代碼如下：

function handleSetupResult(instance, setupResult) {
  instance.setupState = proxyRefs(setupResult);
}

我們?cè)趓ender函數(shù)中渲染msg變量是使用$setup.msg，而$setup對(duì)象的值是從instance.setupState對(duì)象上面來的。

現(xiàn)在我們已經(jīng)找到了instance.setupState是在這里賦值的，它的值是proxyRefs函數(shù)的返回結(jié)果。

proxyRefs函數(shù)

將斷點(diǎn)走進(jìn)proxyRefs函數(shù)，代碼如下：

function proxyRefs(objectWithRefs) {
  return isReactive(objectWithRefs)
    ? objectWithRefs
    : new Proxy(objectWithRefs, shallowUnwrapHandlers);
}

這個(gè)isReactive函數(shù)是vue暴露出來的一個(gè)API，它的作用是檢查一個(gè)對(duì)象是否是由 reactive() 或 shallowReactive() 創(chuàng)建的代理。

這里的objectWithRefs對(duì)象就是setup方法的返回值對(duì)象，通過前面我們知道setup方法的返回值對(duì)象就是一個(gè)普通的js對(duì)象，并不是reactive的。所以proxyRefs函數(shù)會(huì)返回三目運(yùn)算符冒號(hào)（:）后面的表達(dá)式，也就是使用Proxy創(chuàng)建的setup方法返回值對(duì)象代理。

我們接著來看shallowUnwrapHandlers里面做了哪些事情，代碼如下：

const shallowUnwrapHandlers = {
  get: (target, key, receiver) => unref(Reflect.get(target, key, receiver)),
  set: (target, key, value, receiver) => {
    const oldValue = target[key];
    if (isRef(oldValue) && !isRef(value)) {
      oldValue.value = value;
      return true;
    } else {
      return Reflect.set(target, key, value, receiver);
    }
  },
};

這個(gè)handler包含get和set方法，會(huì)對(duì)setup的返回值對(duì)象進(jìn)行攔截。

當(dāng)在render函數(shù)中渲染p標(biāo)簽時(shí)會(huì)去讀$setup.msg，就會(huì)走到get的攔截中。在get方法中使用到了Reflect.get方法和unref函數(shù)。

• Reflect.get(target, key, receiver)的作用是獲取target對(duì)象的key屬性，在我們這里就是獲取setup返回值對(duì)象的msg屬性，也就是我們定義的msg變量。并且這個(gè)msg變量是一個(gè)ref。
• 將Reflect.get方法拿到的msg變量傳給unref函數(shù)，這個(gè)unref函數(shù)同樣是暴露出來的一個(gè)API。如果參數(shù)是 ref，則返回內(nèi)部值，否則返回參數(shù)本身。這是 val = isRef(val) ? val.value : val 計(jì)算的一個(gè)語法糖。經(jīng)過unref函數(shù)的處理后，在get攔截中return的就是.value后的內(nèi)容，也就是msg.value。所以在template中使用ref變量無需使用.value，是因?yàn)樵赑roxy的get攔截中已經(jīng)幫我們自動(dòng)處理了.value。當(dāng)在render函數(shù)中去對(duì)ref變量進(jìn)行賦值，比如：<button @click="msg = 'Hello Vue3'">change msg</button>。就會(huì)走到set攔截中，首先會(huì)執(zhí)行const oldValue = target[key]。這里的key就是"msg"，target就是setup函數(shù)返回值對(duì)象。使用oldValue就是msg變量，是一個(gè)ref。

由于我們?cè)赾lick事件中要將msg賦值成'Hello Vue3'字符串，所以在set攔截中拿到的新value為'Hello Vue3'字符串。

接著執(zhí)行if (isRef(oldValue) && !isRef(value))判斷，這里的oldValue前面已經(jīng)講過了是一個(gè)名為msg的ref變量，所以isRef(oldValue) 為true。value為'Hello Vue3'字符串，所以!isRef(value)也是為true。

代碼就會(huì)走進(jìn)if判斷中執(zhí)行oldValue.value = value，也就是在執(zhí)行msg.value = 'Hello Vue3'。

所以在template中給ref變量賦值無需使用.value，是因?yàn)樵赑roxy的set攔截中也幫我們自動(dòng)處理了.value。

總結(jié)

整個(gè)流程圖如下：

圖片

在vue3的template中使用ref變量無需使用.value，是因?yàn)橛袀€(gè)Proxy的get攔截，在get攔截中會(huì)自動(dòng)幫我們?nèi)トef變量的.value屬性。

同樣的在template中對(duì)ref變量進(jìn)行賦值也無需使用.value，也是有個(gè)Proxy的set攔截，在set攔截中會(huì)自動(dòng)幫我們?nèi)ソoref變量的.value屬性進(jìn)行賦值。