快捷導(dǎo)航

vue3 數(shù)組間取消強(qiáng)關(guān)聯(lián)的幾種實(shí)現(xiàn)方法

更新時間：2025年11月10日 10:52:36 作者：海天勝景

在Vue3中,如果你想要從一個數(shù)組中獲取數(shù)據(jù)并替換另一個數(shù)組中的數(shù)據(jù),但又不想讓這些數(shù)組之間存在強(qiáng)關(guān)聯(lián),你可以通過使用數(shù)組的拷貝、展開運(yùn)算符或使用數(shù)組的slice()方法來實(shí)現(xiàn),感興趣的可以了解一下

在 Vue 3 中，如果你想要從一個數(shù)組中獲取數(shù)據(jù)并替換另一個數(shù)組中的數(shù)據(jù)，但又不想讓這些數(shù)組之間存在強(qiáng)關(guān)聯(lián)，你可以通過使用數(shù)組的拷貝、展開運(yùn)算符（spread operator）或使用數(shù)組的 slice() 方法來實(shí)現(xiàn)。這樣可以確保原始數(shù)據(jù)不被直接修改，從而避免了強(qiáng)關(guān)聯(lián)的問題。

方法 1：使用展開運(yùn)算符

const originalArray = [1, 2, 3];
const newArray = [...originalArray]; // 創(chuàng)建一個 originalArray 的淺拷貝
 
// 修改 newArray
newArray[0] = 10;
 
// originalArray 不受影響
console.log(originalArray); // 輸出: [1, 2, 3]
console.log(newArray);      // 輸出: [10, 2, 3]

方法 2：使用slice()方法

const originalArray = [1, 2, 3];
const newArray = originalArray.slice(); // 創(chuàng)建一個 originalArray 的淺拷貝
 
// 修改 newArray
newArray[0] = 10;
 
// originalArray 不受影響
console.log(originalArray); // 輸出: [1, 2, 3]
console.log(newArray);      // 輸出: [10, 2, 3]

方法 3：使用map()方法（如果需要更深層次的復(fù)制）

如果你需要更深層次的復(fù)制（例如，對象或數(shù)組中的對象也被復(fù)制），可以使用 map() 方法結(jié)合展開運(yùn)算符或 Object.assign()。

const originalArray = [{ id: 1, value: 'a' }, { id: 2, value: 'b' }];
const newArray = originalArray.map(item => ({ ...item })); // 深拷貝每個對象
 
// 修改 newArray 中的對象
newArray[0].value = 'z';
 
// originalArray 不受影響
console.log(originalArray[0].value); // 輸出: 'a'
console.log(newArray[0].value);      // 輸出: 'z'

在 Vue 中使用

在 Vue 組件中，你可以在計(jì)算屬性（computed properties）或方法（methods）中使用這些方法來確保數(shù)據(jù)的獨(dú)立性。例如：

<template>
  <div>
    <p>Original Array: {{ originalArray }}</p>
    <p>New Array: {{ newArray }}</p>
  </div>
</template>
 
<script>
import { ref, computed } from 'vue';
 
export default {
  setup() {
    const originalArray = ref([{ id: 1, value: 'a' }, { id: 2, value: 'b' }]);
    const newArray = computed(() => originalArray.value.map(item => ({ ...item })));
 
    // 修改 newArray 的值（例如，改變第一個元素的 value）
    newArray.value[0].value = 'z';
 
    return { originalArray, newArray };
  }
}
</script>

這樣，originalArray 和 newArray 就保持了獨(dú)立性，修改 newArray 不會影響 originalArray。

到此這篇關(guān)于vue3 數(shù)組間取消強(qiáng)關(guān)聯(lián)的幾種實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)vue3 數(shù)組間取消強(qiáng)關(guān)聯(lián)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: