??前言

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

??關(guān)于響應式

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

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

??reactive 的用法

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

<template>
  <p>
    響應式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 }對象封裝成一個響應式對象，并且可以通過點擊頁面中的按鈕來動態(tài)實現(xiàn)數(shù)據(jù)更新，運行效果如下圖 （項目剛創(chuàng)建的，路有什么的沒配置，忽略無關(guān)內(nèi)容）。

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

<template>
  <p>學生: {{ student.name }}</p>
  <p>成績: {{ 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>

點擊按鈕后，分數(shù)重置。

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

??ref 的用法

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

ref() 負責接受上述類型的數(shù)組返回一個響應式而且可變的 ref 對象，如果要獲取其中的值，需要訪問對象的 .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 對象的值，需要從 .value 屬性中獲得。在模板中可以直接通過插值表達式讀取出來。這里需要注意的是 ref 是響應式對象，所以一旦 ref 的 .value 屬性值被修改，那么對應的頁面模板也會重新渲染。

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

??最后

以上就是這篇文章的全部內(nèi)容了，通過這篇文章，我們可以簡單了解學習 Vue3 響應式的內(nèi)容，通過實際案例我們也學習了 reactive 和 ref 的用法。

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

最新評論