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

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

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

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

ref

目的：創(chuàng)建一個對值的響應式引用。
用法：通過 .value 屬性來訪問和修改值。
示例：

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

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

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

reactive

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

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

不能直接賦值數組：reactive 創(chuàng)建的是一個深度響應的對象或數組，Vue 只跟蹤創(chuàng)建時的對象引用。如果直接重新賦值一個新的對象或數組，Vue 將無法跟蹤新的引用，因為新的引用不會被自動轉換為響應式對象。

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

關鍵區(qū)別和最佳實踐

ref：

創(chuàng)建一個響應式引用。使用 .value 來訪問和修改值?？梢灾苯油ㄟ^ .value 重新賦值新的數組或對象。

reactive：

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

實際解決方案

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

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

總結

ref 適用于需要頻繁更改整個值的場景，因為它可以直接賦值新的數組或對象。

reactive 適用于需要深度響應的對象或數組，在修改其內部屬性或元素時能保持響應性。

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

您可能感興趣的文章: