快捷導(dǎo)航

vue3使用ref和reactive的示例詳解

更新時(shí)間：2023年10月28日 11:50:07 作者：無妄的罪

Vue 3引入了兩個(gè)新的API,ref和reactive,用于創(chuàng)建響應(yīng)式對象,這兩個(gè)方法都位于Vue.prototype上,因此可以在組件實(shí)例中直接使用,本文給大家介紹vue3使用ref和reactive的示例,感興趣的朋友跟隨小編一起看看吧

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

ref

ref函數(shù)用于創(chuàng)建一個(gè)響應(yīng)式引用對象。這個(gè)函數(shù)可以接受一個(gè)普通的變量或?qū)ο笞鳛閰?shù)，并返回一個(gè)響應(yīng)式引用對象。要訪問這個(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)式引用對象，并將其初始值設(shè)置為0。然后，我們可以通過.value屬性來訪問和修改這個(gè)引用的值。當(dāng)修改這個(gè)值時(shí)，Vue會自動更新相關(guān)的視圖。

reactive

reactive函數(shù)用于創(chuàng)建一個(gè)響應(yīng)式對象。這個(gè)函數(shù)可以接受一個(gè)普通的對象作為參數(shù)，并返回一個(gè)響應(yīng)式代理對象。這個(gè)代理對象會攔截所有的屬性訪問和修改操作，并自動更新相關(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)式對象，并將其初始值設(shè)置為一個(gè)包含count屬性的對象。然后，我們可以通過直接訪問和修改這個(gè)對象的屬性來觸發(fā)響應(yīng)式更新。與ref不同的是，我們不需要使用.value屬性來訪問和修改這個(gè)對象的屬性。

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

<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)式引用對象
const count = ref(1);
// 使用 reactive 創(chuàng)建響應(yīng)式對象
const state = reactive({
count: 0,
});
// 使用 increment 方法修改引用對象的值和響應(yīng)式對象的屬性值
const increment = () => {
count.value++; // 修改引用對象的值
state.count++; // 修改響應(yīng)式對象的屬性值
};
return {
count,
state,
increment,
};
},
};
</script>

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

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

您可能感興趣的文章: