前言

你是不是習慣了Vue2的賦值即響應式？Vue2還有個Vue.observable但你從沒用過？結果Vue3像跳跳糖一樣跳出來這么多的響應式API，你有沒有懵逼的感覺？

不慌，挨個學。由于官方文檔寫的晦澀難懂，所以我寫下這篇。原創：簡書microkof。

首先說明，全文提到的“基本數據”是指“數據類型為基本數據類型的數據”，“原始數據”是指被轉變為響應式數據之前的純對象或基本數據。

reactive

Vue 3的根基。返回對象的響應式副本，響應式轉換是“深層”的——它影響所有嵌套property。返回Proxy對象，不等于原始對象。建議只操作Proxy對象，不要操作原始對象。

官方建議，對來自于服務器的數據或者注定要響應式的數據執行reactive之前，最好不要用臨時變量儲存原始數據，因為沒有意義，而且兩個變量容易讓初學者引起誤操作。

<template>
  <button @click="r.a++">count is: {{ r.a }}</button>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    let r = reactive({ a: 1 });
    return {
      r,
    };
  },
};
</script>

ref

ref說白了就是reactive({value: 原始數據})。下方代碼如果打印r對象，會得到RefImpl（ref）對象，它有一個value屬性指向基礎類型值30。

<template>
  <button @click="r++">count is: {{ r }}</button>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    let r = ref(30);
    return {
      r,
    };
  },
};
</script>

為什么似乎Proxy已經解決所有問題，還要有ref API呢？

因為ES的Proxy API是為引用數據類型服務的，它無法為基本數據類型提供代理。如果強行代理，Vue會有提示：value cannot be made reactive: 30。

那么為什么Vue2的defineproperty并沒有區分基本數據類型和引用數據類型呢？

因為defineproperty就是Object的靜態方法，它只是為對象服務的，甚至無法對數組服務，因此Vue 2弄了一個data根對象來存放基本數據類型，這樣無論什么類型，都是根對象的property，所以也就能代理基本數據類型。而Proxy能對所有引用類型代理，Vue 3也不再用data根對象，而是一個個的變量，所以帶來了新問題，如何代理基本數據類型呢？并沒有原生辦法，只能構建一個{value: Proxy Object}結構的對象，這樣Proxy也就能代理了。

問題來了，同樣是響應式結構，ref跟reactive的區別是什么？

ref與reactive的區別

對比	ref	reactive
返回數據類型	RefImpl對象（也叫ref對象）	Proxy對象
傳入基本類型返回	`{value: 基本類型}`	禁止這么做
傳入引用類型返回	`{value: Proxy對象}`	Proxy對象

兩者分別適用場合：

ref可以為基本類型添加響應式，也可以為引用類型添加響應式，reactive只能為引用類型添加響應式。
對于引用類型，什么時候用ref，什么時候用reactive？簡單說，如果你只打算修改引用類型的一個屬性，那么推薦用reactive，如果你打算變量重賦值，那么一定要用ref。具體見下文。

使用組合式API的話，請一定了解“重賦值自身”和“重賦值自身屬性”的區別

這一點非常重要。先看配置項式API中重賦值Proxy的范例，跟Vue 2沒有區別，頁面會渲染出[ { "name": "趙六", "age": 21 } ]字符：

<template>
  <div>
    {{ jsonData }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      jsonData: [
        {
          name: "牛二",
          age: 13,
        },
      ],
    };
  },
  created() {
    this.jsonData = [
      {
        name: "王五",
        age: 19,
      },
    ];
  },
  mounted() {
    this.jsonData = [
      {
        name: "趙六",
        age: 21,
      },
    ];
  },
};
</script>

而使用組合式API，你會發現，reactive后的Proxy在onMounted中重賦值無法觸發渲染，最終頁面顯示[ { "name": "王五", "age": 19 } ]而不是趙六：

<template>
  <div>
    {{ jsonData }}
  </div>
</template>

<script>
import { onMounted, reactive } from "vue";
export default {
  setup() {
    let jsonData = reactive([
      {
        name: "牛二",
        age: 13,
      },
    ]);
    jsonData = reactive([
      {
        name: "王五",
        age: 19,
      },
    ]);
    onMounted(() => {
      jsonData = reactive([
        {
          name: "趙六",
          age: 100,
        },
      ]);
    });
    return {
      jsonData,
    };
  },
};
</script>

原因在于jsonData盡管是響應式的，但是響應式的是它的屬性，而不是它自身，重賦值它自身跟重賦值它的屬性是兩碼事。所以，想在組合式API中讓數據具備響應式，必須用ref，因為ref又對Proxy包裝了一層，修改ref其實是修改它的value，它的value一定是響應式的，因此視圖就正常更新了。

再多說一點，如果數據是服務器返回的LIST數據，而且只顯示、不變更，那么最好是使用shallowRef來包裝數據，可以節能。如果會有變更，那么應該用ref。

下例中采用了Ref語法糖。頁面會顯示Michael的信息：

<template>
  <div>
    {{ jsonData }}
    <ul>
      <li v-for="item in jsonData" :key="item.name">
        {{ item.name }} - {{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
ref: jsonData = [
  {
    name: "Jim",
    age: 13,
  },
];
jsonData = [
  {
    name: "Tom",
    age: 19,
  },
];
onMounted(() => {
  jsonData = [
    {
      name: "Michael",
      age: 100,
    },
  ];
});
</script>

現在好像ref把引用數據類型也管起來了，到底啥時候才適合用reactive呢？很簡單啊，如果你確信你只可能去改引用類型數據的屬性，那么一定要用reactive，如果還有可能要整體重賦值，那還得用ref。所以說：需要在組合式API里給變量重賦值的話，無論什么數據類型都必須用ref，不可以用reactive。

到此，我們清楚了ref與reactive都必須存在的理由，接著說，reactive有一套兄弟API，ref也有一套，它們都是干什么用的？先看reactive的：

reactive與shallowReactive的區別

打印的話，乍一看沒有區別，但是，shallow的中文意義是“淺層的”，shallowReactive不代理深層property，只會指向原始對象的深層property。

注意，給shallowReactive傳入Proxy是沒有意義的，即便這么做，直接返回該Proxy。

shallowReactive的用途是：如果一個對象的深層不可能變化，那么就沒必要深層響應，這時候用shallowReactive可以節省系統開銷。

下例中，按下第2個button不會有反應，只有又去按下第1個button之后，視圖刷新，第二個button才有反應。

<template>
<div>
  <button @click="r.b.c++">count is: {{ r.b.c }}</button>
  <button @click="s.b.c++">count is: {{ s.b.c }}</button>
</div>
</template>

<script>
import { reactive, shallowReactive } from "vue";
export default {
  setup() {
    let r = reactive({a: 1, b: {c: 2}});
    console.log(r);
    let s = shallowReactive({a: 1, b: {c: 2}});
    console.log(s);
    return {
      r,s
    };
  },
};
</script>

reactive與readonly的區別

reactive一般只接受ES普通的引用數據類型，盡管它也可以接受Proxy對象，但是沒有意義、沒有必要，但readonly可以接受Proxy對象，而且有實際意義，它可以獲取純對象或者Proxy或者RefImpl，返回原始代理的只讀代理。說白了它做2步操作，先reactive，然后另生成一個只讀Proxy。

readonly的只讀是深層的只讀：訪問的任何嵌套property也是只讀的。

readonly存在的意義有2個，一個是保護數據不被修改，另一個是提升性能。

下例中，第2個button點擊不會有反應。

<template>
<div>
  <button @click="r.b.c++">count is: {{ r.b.c }}</button>
  <button @click="s.b.c++">count is: {{ s.b.c }}</button>
</div>
</template>

<script>
import { reactive, readonly } from "vue";
export default {
  setup() {
    let r = reactive({a: 1, b: {c: 2}});
    console.log(r);
    let s = readonly({a: 1, b: {c: 2}});
    console.log(s);
    return {
      r,s
    };
  },
};
</script>

readonly與shallowReadonly的區別

就像reactive與shallowReactive的一樣，shallowReadonly只會給對象的第一層property設置只讀，不去管深層property，因此深層property并沒有被代理，只會指向原始對象。

下例中：

按下button1會有報錯提示：Set operation on key "c" failed: target is readonly.，因為r是深層只讀的。

按下button2沒有任何反應，因為shallowReadonly的深層是指向原始值的，修改原始對象不會反映到視圖上。

按下button3也會有報錯提示：Set operation on key "a" failed: target is readonly.，因為shallowReadonly是淺層只讀的，a恰好是淺層property。

<template>
<div>
  <button @click="r.b.c++">count is: {{ r.b.c }}</button>
  <button @click="s.b.c++">count is: {{ s.b.c }}</button>
  <button @click="s.a++">count is: {{ s.a }}</button>
</div>
</template>

<script>
import { readonly, shallowReadonly } from "vue";
export default {
  setup() {
    let r = readonly({a: 1, b: {c: 2}});
    console.log(r);
    let s = shallowReadonly({a: 1, b: {c: 2}});
    console.log(s);
    return {
      r,s
    };
  },
};
</script>

shallowReactive與shallowReadonly的區別

首先說，兩者對深層property的態度是一致的，即“不去代理”，深層property都是指向原始對象的深層property，都允許直接修改原始對象的深層property，區別在于對待淺層property方面。

shallowReactive允許修改淺層property，shallowReadonly不允許，Vue3會阻止并給出報錯。

isReactive、isReadonly、isProxy的區別

isReactive：Proxy是否是由reactive創建，是則返回true
isReadonly：Proxy由readonly創建則返回true
isProxy：上面兩個滿足任意一條，就返回true

上例中，如果加入這3條打印會得到什么？

    console.log(isReadonly(s)); // true
    console.log(isReadonly(s.a)); // false，因為s.a得到的是a的值，而不是a自身，a的值當然不是響應式的
    console.log(isReadonly(s.b)); // false，道理同上

toRaw是什么

官方已經解釋的很清楚，返回proxy的原始對象。這是一個轉義口，2個作用：可用于臨時讀取而不會引起proxy訪問/跟蹤開銷，也可用于寫入而不會觸發視圖更新。

官方又說，不建議保留對原始對象的持久引用。請謹慎使用。這句話什么意思？就是說：

盡量不要把原始對象賦值給變量，盡量減少中間變量；
將原始對象轉換為Proxy之后，如果你臨時打算操作一下原始對象，那么也不要因為這個目的就早早的把原始對象賦值給變量，而是應該用toRaw(proxy)，以獲取原始對象，比如得到一個變量R，然后你可以操作R，操作完成之后就不要再碰R，而應繼續操作Proxy。

下例中：

按下button1，會發現button2也跟著變，這表明Proxy的基本原理：操作Proxy會反映到原始對象身上。

按下button2，沒有任何反應，表明操作原始對象不會反映到視圖上。這時候重新按下button1，會發現數字跳躍了幾個數，這表明直接修改原始對象之后，Proxy對原始對象繼續代理，并不需要重新reactive。

<template>
<div>
  <button @click="r.b.c++">count is: {{ r.b.c }}</button>
  <button @click="s.b.c++">count is: {{ s.b.c }}</button>
</div>
</template>

<script>
import { reactive, toRaw } from "vue";
export default {
  setup() {
    let r = reactive({a: 1, b: {c: 2}});
    console.log(r);
    let s = toRaw(r);
    console.log(s);
    return {
      r,s
    };
  },
};
</script>

markRaw與readonly的區別

markRaw是操作原始對象的，它的意義是將原始對象或者原始對象的某個淺層或深層property標記為“永遠不允許被代理”。Vue3會給對象的第一層或某深層加一個標記__v_skip: true，這樣，即便原始對象被reactive之后，得到的該層和更深層就不會被代理。

如果想給原始對象的某個property加markRaw，需要執行3步，先定義變量指向該property，然后markRaw這個變量得到新對象，然后讓源對象的property指向新對象。

如果將加了標記的原始對象當做其他原始對象的屬性，其他原始對象被reactive之后，加了標記的對象依然不會被reactive。也就是說，reactive見了__v_skip: true就繞著走。

注意：雖然Vue3只會在表層加標記，但是會影響深層的property。

markRaw與readonly的區別，在于側重點不同：

markRaw允許被修改，但不允許被代理。這里盡管說允許修改，但是修改的意義不大，畢竟Vue的核心思想是響應式，在添加響應式之前修改意義不大。
readonly不允許被修改，但已經被代理。

它們兩者相同點在于，從不同角度節省系統開銷。

markRaw的用途：

首先說，直接給某個對象全盤markRaw是沒有意義的，因為你就是開發者，你不想讓某對象被reactive，那么你不去寫reactive就好了啊。所以markRaw的用途應該是：允許對象被reactive，但是阻止對象的部分內容被reactive。

markRaw與shallowReactive的區別

	markRaw	shallowReactive
作用	阻止響應式	讓淺層property響應式，不操作深層property
淺層property	阻止響應式	執行響應式
深層property	阻止響應式	不執行響應式，也不阻止

如果希望阻止其他程序員將對象響應式，則可以使用markRaw來保護。
如果剛好打算不讓從第2層到最深層的所有property響應式，那么用shallowReactive可能更好。
如果想要更定制化的阻止某些property被響應式，那么應當使用markRaw。例如下例中，x.b被標記，然后重復值給自己，此時再將x響應式，x.b依然沒有被響應式。所以點擊button不會有反應。

<template>
<div>
  <button @click="s.b.c++">count is: {{ s.b.c }}</button>
</div>
</template>

<script>
import { markRaw, reactive } from "vue";
export default {
  setup() {
    let x = {a:1, b: {c: 2}};
    x.b = markRaw(x.b);
    let s = reactive(x);
    console.log(isReactive(s)); // true
    console.log(isReactive(s.b)); // false
    return {
      s
    };
  },
};
</script>

最后我們看ref和它的兄弟API。

ref與shallowRef的區別

	ref	shallowRef
本質	reactive({value: 原始數據})	shallowReactive({value: 原始數據})
區別點	{value: 原始數據}被深層響應式	只有value被響應式，原始數據沒有響應式
傳入基本類型	兩個API無差別	兩個API無差別，性能考慮盡量用shallowRef
傳入引用類型	value指向Proxy	value指向原始數據

shallowRef的作用是只對value添加響應式，因此，必須是value被重新賦值才會觸發響應式。shallowRef的出現主要是為了節省系統開銷。

下例中，點擊button1會有反應，點擊button2不會有反應。關鍵是點擊button3，我們知道在<template>里，如果給s重新賦值，其實相當于給s.value重新賦值，由于value是響應式的，這時候button2和button3都會有變化。

<template>
  <div>
    <button @click="r.b.c++">count is: {{ r.b.c }}</button>
    <button @click="s.b.c++">count is: {{ s.b.c }}</button>
    <button @click="s = { a: 10, b: { c: 20 } }">count is: {{ s.b.c }}</button>
  </div>
</template>

<script>
import { ref, shallowRef } from 'vue';
export default {
  setup() {
    let r = ref({ a: 1, b: { c: 2 } });
    let s = shallowRef({ a: 1, b: { c: 2 } });
    return {
      r,
      s,
    };
  },
};
</script>

toRef是咋回事

先看看這個題目，看看Proxy對象里面的基本數據是否具備響應式：

<template>
<div>
  <button @click="r.a++">count is: {{ r.a }}</button>
  <button>count is: {{ s }}</button>
</div>
</template>

<script>
import { reactive, toRef } from "vue";
export default {
  setup() {
    let r = reactive({a:1});
    console.log(r);
    let s = r.a;
    console.log(s);
    return {
      r,s
    };
  },
};
</script>

當我點擊button1的時候，你說button2會變嗎？并不會。變量s就是個基本數據，沒有任何響應式。很不爽是不是？現在我改改，把let s = r.a;改成let s = toRef(r, 'a');，然后再試試？

可以看到button2的數字跟著變了！這就是toRef的作用：當一個變量指向一個對象的某個property，且這個property是基本數據類型時，必須用toRef才能變量與對象的響應式連接。如果這個property是引用數據類型，就不需要動用toRef。

toRef的用途之一是用于傳參，可傳遞一個響應式的基本數據類型。

toRef還有一個特點是可以提前綁定，看個例子，r的原始數據并沒有property叫c，但是我就任性，我就提前讓s賦值為toRef(r, 'c')，這時候兩個button上是沒有數據的，畢竟property c是不存在的，在我點擊button1之后，兩個button都顯示了3，說明提前綁定是有用的。

<template>
<div>
  <button @click="r.c = 3">count is: {{ r.c }}</button>
  <button>count is: {{ s }}</button>
</div>
</template>

<script>
import { reactive, toRef } from "vue";
export default {
  setup() {
    let r = reactive({a:{b:2}});
    console.log(r);
    let s = toRef(r, 'c');
    console.log(s);
    return {
      r,s
    };
  },
};
</script>

ref與toRef的區別

	ref	toRef
用法	ref(原始值)	toRef(Proxy, 'xxprop')
返回	ref對象	同左
誤區	不要給ref傳入純對象的屬性，毫無意義且造成困惑，應傳原始值	不要給toRef傳入原始值，毫無意義且造成困惑，應傳Proxy

講解一下誤區。比如下例中：

點擊button1，打印的ref對象是如期待的{ count: 4 }，視圖也更新為4，但是原始值并沒有變，依然是{ count: 3 }。這說明：給ref傳純對象的屬性會造成困惑。
刷新頁面，只點擊button2，打印的ref對象變了，原始值也變了，但是視圖沒有更新，還是3。說明：給toRef傳入原始值是錯誤的操作，應當傳入Proxy，但也證明toRef對傳入值是指向關系。
刷新頁面，只點擊button3，一切如期待，說明：上面的說法是正確的。

<template>
  <div>
    <p>{{ state1 }}</p>
    <button @click="add1">增加</button>

    <p>{{ state2 }}</p>
    <button @click="add2">增加</button>

    <p>{{ state3.a }} - {{ state4 }}</p>
    <button @click="add3">增加</button>
  </div>
</template>

<script>
import { reactive, ref, toRef } from "vue";
export default {
  setup() {
    const obj = { count: 3 };
    const state1 = ref(obj.count);
    const state2 = toRef(obj, "count");
    const state3 = reactive({ a: 5 });
    const state4 = toRef(state3, "a");

    function add1() {
      state1.value++;
      console.log("原始值obj：", obj);
      console.log("state1：", state1);
    }

    function add2() {
      state2.value++;
      console.log("原始值obj：", obj);
      console.log("state2：", state2);
    }

    function add3() {
      state4.value++;
      console.log("state3：", state3);
      console.log("state4：", state4);
    }

    return { state1, state2, state3, state4, add1, add2, add3 };
  },
};
</script>

toRef與toRefs的區別

toRefs可以看做批量版本的toRef。

	toRef	toRefs
用法	toRef(Proxy, 'xxprop')	toRefs(Proxy)
返回	ObjectRefImpl對象	同左
作用	創建變量到Proxy屬性的響應式連接	創建變量每個屬性到Proxy每個屬性的響應式連接
連接關系	一對一	多對多

下例中，當點擊button1時，所有button都會有反應。

<template>
<div>
  <button @click="r.c = 3">count is: {{ r.c }}</button>
  <button>count is: {{ s }}</button>
  <button>count is: {{ t.c.value }}</button>
</div>
</template>

<script>
import { reactive, toRef, toRefs } from "vue";
export default {
  setup() {
    let r = reactive({a:{b:2}, c: 4});
    console.log(r);
    let s = toRef(r, 'c');
    console.log(s);
    let t = toRefs(r);
    console.log(t.c)
    return {
      r,s,t
    };
  },
};
</script>

toRefs的一大用途是變相解構Proxy。首先了解一個常識，Proxy如果解構，基本數據會丟失響應式。現在我既想要解構Proxy，又不想丟失響應式，怎么辦？可以使用toRefs。

下例中，變量c是基本數據，它不具備響應式，因此button1被點擊之后，button2不會跟著變。如果將let {c} = r;改成let {c} = toRefs(r);，則變量c具備了響應式，button2會跟著變。

<template>
<div>
  <button @click="r.c = 3">count is: {{ r.c }}</button>
  <button>count is: {{ c }}</button>
</div>
</template>

<script>
import { reactive, toRefs } from "vue";
export default {
  setup() {
    let r = reactive({a:{b:2}, c: 4});
    let {c} = r;
    return {
      r,c
    };
  },
};
</script>

toRefs的簡潔用法：

return {...toRefs(Proxy), others}可用于返回解構的Proxy，而不需要創建一個臨時變量。

如果組件只需要返回一個解構的Proxy，可以更簡略：return toRefs(Proxy)。

customRef是什么

customRef跟ref、toRef、toRefs有很大區別，它生成的ref對象會自定義get和set。

customRef的主要用途至少有2個：

時機上說，可以控制視圖更新的時機，可以延遲更新。其他ref兄弟API都做不到。
內容上說，可以修改傳入的原始數據，讓原始數據與返回值不相同。其他兄弟API也做不到。

<template>
<div>
{{text}} - <input v-model="text" />
</div>
</template>

<script>
function useDebouncedRef(value, delay = 200) {
  let timeout
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue + 1
          console.log(value)
          trigger()
        }, delay)
      }
    }
  })
}

export default {
  setup() {
    return {
      text: useDebouncedRef('hello')
    }
  }
}
</script>

測試：在<input>里快速敲入一串字符，左邊的{{text}}位置會延遲出現結果，而且會節流，而且console.log(value)也會延遲打印。

解釋：track和trigger，其中track用于追蹤，寫在return之前。trigger是觸發，用在賦值給value語句之后。

將ref改寫成customRef應該怎么寫？去掉延時，且value = newValue即可。

unref是什么

unref類似于toRaw。unref的本質就是解包，把{value: Proxy || 基本數據}解成Proxy || 基本數據。unref對toRefs創造的對象的各個屬性也起作用，因為各個屬性也是ref對象。

由于Vue3的開發原則是盡量不要直接修改內部值，對ref來講就是盡量不要修改Proxy，如果某些場景下非要直接修改Proxy，需要用unref臨時將ref還原為Proxy。與toRaw一樣，修改完Proxy之后并不需要重新執行ref。

下例中，點擊button1和button2，兩個按鈕都會有反應。

<template>
<div>
  <button @click="r.b.c++">count is: {{ r.b.c }}</button>
  <button @click="s.b.c++">count is: {{ s.b.c }}</button>
</div>
</template>

<script>
import { ref, unref } from "vue";
export default {
  setup() {
    let r = ref({a: 1, b: {c: 2}});
    let s = unref(r);
    return {
      r,s
    };
  },
};
</script>

toRaw與unref的區別

用這三行代碼就很容易說明了：

    const obj = { count: 3 };
    const state = ref(obj);
    console.log(toRaw(state.value) === toRaw(unref(state))); // true

說明：

當變量state為ref對象時，state.value === unref(state)為真，兩邊都是Proxy對象，也說明，想得到ref的Proxy，有2種方式：.value或者unref，完全等價。
當變量state為ref對象時，toRaw(state.value) === toRaw(unref(state))兩邊都是原始值，也說明想獲得ref對象的原始值且原始值為引用類型時，有2種方式，toRaw(state.value)或者toRaw(unref(state))，如果原始值為基本類型，也有2種方式，state.value或者unref(state)。所以，toRaw并不是對ref沒用，ref想得到原始對象就得用toRaw。
toRaw對ref對象無效，必須作用于ref.value。

triggerRef是什么

我們知道shallowRef返回的ref對象的value指向的是內部值，如果，我既想使用shallowRef生成ref對象（為了節省開銷），又想偶爾修改value指向的內部值的某個property，又希望那個ref對象得到響應，我該怎么辦？這時候可以用triggerRef。

下例中，如果注釋掉triggerRef(r)，那么點擊button不會看到任何反應，因為{a:{b:2}, c: 4}都是非響應式的。

<template>
<div>
  <button @click="onClick">count is: {{ r.c }}</button>
</div>
</template>

<script>
import { shallowRef, triggerRef } from "vue";
export default {
  setup() {
    let r = shallowRef({a:{b:2}, c: 4});
    function onClick() {
      r.value.c = 6;
      triggerRef(r);
    }
    return {
      r, onClick
    };
  },
};
</script>

isRef是什么

這個不說了。

Vue 2的ref在Vue 3怎么用？

這算是一個附錄。Vue 2的ref在Vue 3依然存在，依然那樣標記：

<div ref="elA">div元素</div>

但是在setup() {}里并不是Vue 2那么用，而是定義一個頂層變量，值很簡單，一律寫成ref(null)即可，重要的是變量名，變量名必須與<div ref="elA">的elA一致，然后onMounted里才能獲取、操作elA元素，elA.value就指向這個DOM元素，最后不要忘記return這個elA變量：

import { ref, onMounted } from 'vue'
export default {
  setup() {
      const elA = ref(null);

      // 在掛載后才能通過 elA 獲取到目標元素
      onMounted(() => {
        elA.value.innerHTML = '內容被修改'
      })

      return {elA}
  }
}

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

全面解析Vue3 Reactive家族和Ref家族API

全面解析Vue3 Reactive家族和Ref家族API

前言

reactive

ref

為什么似乎Proxy已經解決所有問題，還要有ref API呢？

ref與reactive的區別

使用組合式API的話，請一定了解“重賦值自身”和“重賦值自身屬性”的區別

reactive與shallowReactive的區別

reactive與readonly的區別

readonly與shallowReadonly的區別

shallowReactive與shallowReadonly的區別

isReactive、isReadonly、isProxy的區別

toRaw是什么

markRaw與readonly的區別

markRaw與shallowReactive的區別

ref與shallowRef的區別

toRef是咋回事

ref與toRef的區別

toRef與toRefs的區別

customRef是什么

unref是什么

toRaw與unref的區別

triggerRef是什么

isRef是什么

Vue 2的ref在Vue 3怎么用？

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

全面解析Vue3 Reactive家族和Ref家族API

前言

reactive

ref

為什么似乎Proxy已經解決所有問題，還要有ref API呢？

ref與reactive的區別

使用組合式API的話，請一定了解“重賦值自身”和“重賦值自身屬性”的區別

reactive與shallowReactive的區別

reactive與readonly的區別

readonly與shallowReadonly的區別

shallowReactive與shallowReadonly的區別

isReactive、isReadonly、isProxy的區別

toRaw是什么

markRaw與readonly的區別

markRaw與shallowReactive的區別

ref與shallowRef的區別

toRef是咋回事

ref與toRef的區別

toRef與toRefs的區別

customRef是什么

unref是什么

toRaw與unref的區別

triggerRef是什么

isRef是什么

Vue 2的ref在Vue 3怎么用？

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频