Vue 3引入了兩個(gè)新的API，ref和reactive，用于創(chuàng)建響應(yīng)式對(duì)象。這兩個(gè)方法都位于Vue.prototype上，因此可以在組件實(shí)例中直接使用。

ref

ref函數(shù)用于創(chuàng)建一個(gè)響應(yīng)式引用對(duì)象。這個(gè)函數(shù)可以接受一個(gè)普通的變量或?qū)ο笞鳛閰?shù)，并返回一個(gè)響應(yīng)式引用對(duì)象。要訪問(wèn)這個(gè)引用的值，需要使用.value屬性。

例如：

const count = ref(0);
console.log(count.value); // 0
count.value++; // 響應(yīng)式更新
console.log(count.value); // 1

在上面的例子中，我們使用ref函數(shù)創(chuàng)建了一個(gè)響應(yīng)式引用對(duì)象，并將其初始值設(shè)置為0。然后，我們可以通過(guò).value屬性來(lái)訪問(wèn)和修改這個(gè)引用的值。當(dāng)修改這個(gè)值時(shí)，Vue會(huì)自動(dòng)更新相關(guān)的視圖。

reactive

reactive函數(shù)用于創(chuàng)建一個(gè)響應(yīng)式對(duì)象。這個(gè)函數(shù)可以接受一個(gè)普通的對(duì)象作為參數(shù)，并返回一個(gè)響應(yīng)式代理對(duì)象。這個(gè)代理對(duì)象會(huì)攔截所有的屬性訪問(wèn)和修改操作，并自動(dòng)更新相關(guān)的視圖。

例如：

const state = reactive({ count: 0 });
console.log(state.count); // 0
state.count++; // 響應(yīng)式更新
console.log(state.count); // 1

在上面的例子中，我們使用reactive函數(shù)創(chuàng)建了一個(gè)響應(yīng)式對(duì)象，并將其初始值設(shè)置為一個(gè)包含count屬性的對(duì)象。然后，我們可以通過(guò)直接訪問(wèn)和修改這個(gè)對(duì)象的屬性來(lái)觸發(fā)響應(yīng)式更新。與ref不同的是，我們不需要使用.value屬性來(lái)訪問(wèn)和修改這個(gè)對(duì)象的屬性。

Vue 3 使用 ref 和 reactive 創(chuàng)建響應(yīng)式對(duì)象的完整示例：

<template>
<div>
<p>{{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { ref, reactive } from 'vue';
export default {
setup() {
// 使用 ref 創(chuàng)建響應(yīng)式引用對(duì)象
const count = ref(1);
// 使用 reactive 創(chuàng)建響應(yīng)式對(duì)象
const state = reactive({
count: 0,
});
// 使用 increment 方法修改引用對(duì)象的值和響應(yīng)式對(duì)象的屬性值
const increment = () => {
count.value++; // 修改引用對(duì)象的值
state.count++; // 修改響應(yīng)式對(duì)象的屬性值
};
return {
count,
state,
increment,
};
},
};
</script>

在上面的示例中，我們使用 ref 創(chuàng)建了一個(gè)名為 count 的響應(yīng)式引用對(duì)象，初始值為 1。我們還使用 reactive 創(chuàng)建了一個(gè)名為 state 的響應(yīng)式對(duì)象，其中包含一個(gè)名為 count 的屬性，初始值為 0。在 increment 方法中，我們通過(guò)調(diào)用 count.value++ 和 state.count++ 來(lái)修改引用對(duì)象的值和響應(yīng)式對(duì)象的屬性值。由于這些變量都是響應(yīng)式的，因此當(dāng)它們的值發(fā)生變化時(shí)，相關(guān)的視圖也會(huì)自動(dòng)更新。

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

最新評(píng)論