快捷導(dǎo)航

Vue.js 中 ref 和 reactive 的區(qū)別及用法解析

更新時(shí)間：2024年09月19日 09:59:32 作者：陳小唬

在Vue.js中,ref主要用于創(chuàng)建響應(yīng)式的引用,通過(guò).value屬性來(lái)訪問(wèn)和修改值,特別適用于需要頻繁更改整個(gè)值的場(chǎng)景,而reactive則用于創(chuàng)建深度響應(yīng)的對(duì)象或數(shù)組,本文給大家介紹Vue.js 中 ref 和 reactive 的區(qū)別及用法,感興趣的朋友跟隨小編一起看看吧

Vue.js 中 ref 和 reactive 的區(qū)別及用法

ref

目的：創(chuàng)建一個(gè)對(duì)值的響應(yīng)式引用。
用法：通過(guò) .value 屬性來(lái)訪問(wèn)和修改值。
示例：

import { ref } from 'vue';
const count = ref(0);
count.value++;  // 增加值
console.log(count.value);  // 訪問(wèn)值

直接賦值數(shù)組：ref 創(chuàng)建的是一個(gè)包含 .value 屬性的對(duì)象，這個(gè) .value 屬性持有實(shí)際的數(shù)據(jù)。無(wú)論如何改變這個(gè) .value 的內(nèi)容，Vue 都能檢測(cè)到變化并進(jìn)行更新。

import { ref } from 'vue';
const city1List = ref([]);
onMounted(() => {
  getCityByPid(0).then(res => {
    city1List.value = res.data.data;  // 直接賦值新數(shù)組
    console.log(city1List.value);  // 訪問(wèn)數(shù)組內(nèi)容
  });
});

reactive

目的：創(chuàng)建一個(gè)深度響應(yīng)的對(duì)象或數(shù)組。
用法：直接修改響應(yīng)對(duì)象或數(shù)組的屬性。
示例：

import { reactive } from 'vue'; const state = reactive({ count: 0 }); 
state.count++; // 增加 
count console.log(state.count); // 訪問(wèn) count

不能直接賦值數(shù)組：reactive 創(chuàng)建的是一個(gè)深度響應(yīng)的對(duì)象或數(shù)組，Vue 只跟蹤創(chuàng)建時(shí)的對(duì)象引用。如果直接重新賦值一個(gè)新的對(duì)象或數(shù)組，Vue 將無(wú)法跟蹤新的引用，因?yàn)樾碌囊貌粫?huì)被自動(dòng)轉(zhuǎn)換為響應(yīng)式對(duì)象。

import { reactive } from 'vue';
let city1List = reactive([]); 
onMounted(() => { 
getCityByPid(0).then(res => 
     { city1List.splice(0, city1List.length, ...res.data.data); // 使用數(shù)組方法修改內(nèi)容 
     console.log(city1List); // 訪問(wèn)數(shù)組內(nèi)容 
   }); 
);

關(guān)鍵區(qū)別和最佳實(shí)踐

ref：

創(chuàng)建一個(gè)響應(yīng)式引用。使用 .value 來(lái)訪問(wèn)和修改值。可以直接通過(guò) .value 重新賦值新的數(shù)組或?qū)ο蟆?/p>

reactive：

創(chuàng)建一個(gè)深度響應(yīng)的對(duì)象或數(shù)組。
直接修改對(duì)象或數(shù)組的屬性或元素。
不能直接重新賦值整個(gè)對(duì)象或數(shù)組，而需要修改其內(nèi)部的屬性或元素。

實(shí)際解決方案

使用 reactive 更新數(shù)組時(shí)，可以使用 splice 清除并替換元素，這樣保持了對(duì)原始響應(yīng)數(shù)組的引用，Vue 會(huì)繼續(xù)跟蹤其內(nèi)容的變化。

import { reactive } from 'vue';
let city1List = reactive([]);
onMounted(() => {
  getCityByPid(0).then(res => {
    city1List.splice(0, city1List.length, ...res.data.data);  // 清除現(xiàn)有數(shù)組并添加新項(xiàng)目
    console.log(city1List);  // 訪問(wèn)數(shù)組內(nèi)容
  });
});

總結(jié)

ref 適用于需要頻繁更改整個(gè)值的場(chǎng)景，因?yàn)樗梢灾苯淤x值新的數(shù)組或?qū)ο蟆?/p>

reactive 適用于需要深度響應(yīng)的對(duì)象或數(shù)組，在修改其內(nèi)部屬性或元素時(shí)能保持響應(yīng)性。

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

您可能感興趣的文章: