??前言
這篇文章記錄一下 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>成績: {{ 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 最常見也最重要的命令之一。文章來源：http://www.zghlxwxcb.cn/news/detail-520587.html
??最后
以上就是這篇文章的全部內(nèi)容了，通過這篇文章，我們可以簡單了解學(xué)習(xí) Vue3 響應(yīng)式的內(nèi)容，通過實(shí)際案例我們也學(xué)習(xí)了 reactive 和 ref 的用法。
文章來源地址http://www.zghlxwxcb.cn/news/detail-520587.html
到了這里，關(guān)于關(guān)于 Vue3 響應(yīng)式 API 以及 reactive 和 ref 的用法的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
