??前言

這篇文章記錄一下 Vue3 響應(yīng)式的內(nèi)容，其中還包括了 reactive 和 ref 的用法。響應(yīng)式是一種允許以聲明式的方式去適應(yīng)變化的編程范例，接下來我們一起看看。

??關(guān)于響應(yīng)式

Vue 框架的特點(diǎn)之一就是響應(yīng)式。Vue 2.x 是基于 Object.defineProperty() 方法實(shí)現(xiàn)響應(yīng)式。但是 Object.defineProperty() 方法有一定的局限性，例如 Object.defineProperty() 無法監(jiān)聽對(duì)象屬性的新增。為了克服解決這種缺陷，Vue 在 3.x 版本引入 Proxy 對(duì)象來實(shí)現(xiàn)響應(yīng)式。

Proxy 不僅可以監(jiān)聽到屬性的變化和刪除，同時(shí)還支持代理復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，例如 Map 、Set 、Symbol 等等。但是 Proxy 也是缺點(diǎn)，就是不兼容 IE 11（實(shí)際開發(fā)中如果要求程序員兼容 IE ，他可能反手就紅溫了hhh）。言歸正傳，如果要考慮兼容 IE 11 的問題，可以使用 Vue 2.x 版本來開發(fā)。

??reactive 的用法

Vue 的 reactive() 方法通過接收一個(gè)對(duì)象，返回對(duì)象的響應(yīng)式副本，我們可以看看下面這段代碼。

<template>
  <p>
    響應(yīng)式Count: {{ reactiveCount.count }}
    <button @click="reactiveCount.count++">++</button>
  </p>
</template>
<script setup lang="ts">
import { reactive } from "vue";
interface CountObject {
  count: number;
}
const reactiveCount = reactive<CountObject>({ count: 0 });
</script>

這里通過 reactive() 方法將 { count: 0 }對(duì)象封裝成一個(gè)響應(yīng)式對(duì)象，并且可以通過點(diǎn)擊頁面中的按鈕來動(dòng)態(tài)實(shí)現(xiàn)數(shù)據(jù)更新，運(yùn)行效果如下圖 （項(xiàng)目剛創(chuàng)建的，路有什么的沒配置，忽略無關(guān)內(nèi)容）。

reactive() 方法封裝對(duì)象成為響應(yīng)式并不僅僅是一層，而是深層轉(zhuǎn)換。如果想要在 script 模板中修改對(duì)象某個(gè)屬性的值，直接訪問進(jìn)行修改即可。代碼如下。

<template>
  <p>學(xué)生: {{ student.name }}</p>
  <p>成績(jī): {{ student.test_socre.name }} | {{ student.test_socre.score }}分</p>
  <button @click="rest">rest mark</button>
</template>
<script setup lang="ts">
import { reactive } from "vue";
interface Student {
  name: string;
  test_socre: {
    name: string;
    score: number;
  };
}
const student = reactive<Student>({
  name: "ghz",
  test_socre: {
    name: "C語言",
    score: 98,
  },
});
const rest = () => {
  student.test_socre.score = 0;
};
</script>

點(diǎn)擊按鈕后，分?jǐn)?shù)重置。

這里 reactive() 將一個(gè)比較復(fù)雜的對(duì)象轉(zhuǎn)換成了響應(yīng)式對(duì)象，通過點(diǎn)擊按鈕，調(diào)用 rest 方法，將 student 對(duì)象中的 test_score 下的 score 重置為 0 分。同時(shí)，在方法內(nèi)部，可以直接訪問對(duì)象的屬性進(jìn)行修改數(shù)值。

??ref 的用法

在 Vue 3.x 中，ref() 負(fù)責(zé)將基本數(shù)據(jù)類型的數(shù)據(jù)封裝成響應(yīng)式數(shù)據(jù)。在所使用的 TypeScript 中，基本數(shù)據(jù)類型有：String 、Number 、Boolean 、Bigint 、Symbol 、Undefined 、Null。

ref() 負(fù)責(zé)接受上述類型的數(shù)組返回一個(gè)響應(yīng)式而且可變的 ref 對(duì)象，如果要獲取其中的值，需要訪問對(duì)象的 .value 屬性來獲取。我們可以看看下面這段代碼。

<template>
  <div></div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const str = ref<string>("hello");
const num = ref<number>(123);
const bool = ref<boolean>(true);
const bigint = ref<bigint>(9007199254740991n);
const symbolObject = Symbol("foo");
const symb = ref<symbol>(symbolObject);
const und = ref<undefined>(undefined);
const nul = ref<null>(null);
console.log(str.value); // hello
console.log(num.value); // 123
console.log(bool.value); // true
console.log(bigint.value); // 9007199254740991nX
console.log(typeof symb.value); // symbol
console.log(symb.value); // Symbol(foo)
console.log(und.value); // undefined
console.log(nul.value); // null
</script>

從上面的這段代碼中可以看到，如果想要在 script 模板中讀取或者修改 ref 對(duì)象的值，需要從 .value 屬性中獲得。在模板中可以直接通過插值表達(dá)式讀取出來。這里需要注意的是 ref 是響應(yīng)式對(duì)象，所以一旦 ref 的 .value 屬性值被修改，那么對(duì)應(yīng)的頁面模板也會(huì)重新渲染。

reactive() 負(fù)責(zé)封裝對(duì)象變量，ref() 負(fù)責(zé)封裝基礎(chǔ)數(shù)據(jù)類型變量，這兩個(gè)方法是 Vue3 最常見也最重要的命令之一。

??最后

以上就是這篇文章的全部?jī)?nèi)容了，通過這篇文章，我們可以簡(jiǎn)單了解學(xué)習(xí) Vue3 響應(yīng)式的內(nèi)容，通過實(shí)際案例我們也學(xué)習(xí)了 reactive 和 ref 的用法。

到此這篇關(guān)于關(guān)于 Vue3 響應(yīng)式 API 以及 reactive 和 ref 的用法的文章就介紹到這了,更多相關(guān)Vue3 reactive 和 ref 的用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論