Vue.js - 陣列和物件的賦值動態變化 & 克隆

這篇文章主要介紹了 vue 陣列和物件不能直接賦值動態變化 & 克隆情況和解決方法，需要的朋友可以參考下。

 

一、直接賦值動態變化

1.1、Vue 不能檢測以下變動的陣列

當你利用索引直接設定一個項時，例如

vm.items[indexOfItem] = newValue

當你修改陣列的長度時，例如

vm.items.length = newLength

1.2、解決方案

當第一種情況需求時，可以使用

this.$set(this.arr,index,newVal)

或

this.arr = [新陣列]

 

2.1、Vue 不能檢測以下變動的物件

當你修改一個初始化時，不存在的物件裡的屬性時

this.obj.b = 3

Ps：在不重新整理頁面父子元件的情況下，二次觸發就可以，因為由於第一次的觸發渲染，但第一次並沒有觸發，只有第二次會顯示。

2.2、解決方案

當修改一個初始化已存在的屬性，可以直接檢測到動態變化

this.obj.a = 3

或

上面不能檢測到的另一種解決方案

this.$set(this.person,'age',12)

或

this.obj = { a: 3, b: 4 }

當需要新增多個物件時

Object.assign({},this.person,{age:12,name:'wee'})

 

二、陣列、物件克隆

當元件間傳遞物件時，由於此物件的引用型別指向的都是一個地址（除了基本型別跟null,物件之間的賦值，只是將地址指向同一個，而不是真正意義上的拷貝），如下。

陣列：

var a = [1,2,3];
var b = a;
b.push(4); // b中新增了一個4
alert(a);  // a變成了[1,2,3,4]

物件：

var obj = {a:10};
var obj2 = obj;
obj2.a = 20;  // obj2.a改變了
alert(obj.a); // 20，obj的a跟著改變 

這就是由於物件型別直接賦值，只是將引用指向同一個地址，導致修改了 obj 會導致 obj2 也被修改。

所以在 vue 中，如果多個元件引用了同一個物件作為資料，那麼當其中一個元件改動物件資料時，其他物件的資料也會同步改動。有這種雙向繫結的需要的話，那麼自然是最好的，但如果不需要這種繫結而希望各元件的物件資料之間相互獨立，即是互不關聯的物件副本的話，可以用下面的方法解決。

computed: { 
   data: function () { 
     var obj={}; 
     obj=JSON.parse(JSON.stringify(this.templateData)); //this.templateData是父元件傳遞的物件 
     return obj 
  } 
 }

當然日常的克隆也可以使用這句關鍵程式碼

JSON.parse(JSON.stringify(...));