Vue知識回顧與總結【四】vm.$set和vm.$delete

Vue知識回顧與總結【四】

vm.$set

用法回顧

vm.$set()

相信使用vue的人都不陌生，主要用于解決對象新增屬性，删除屬性時資料無法偵測問題，以及通過索引操作數組元素資料無法偵測的問題。用法如下：

vm.$set( target,key ,value )
           

實作原理

• 在Vue.js的原型上設定

  $set

  屬性，所有以**vm.$**開頭的方法都是在Vue.js的原型中實作的。

處理數組

如果target是一個數組，且key為有效的數組索引，先判斷傳入的索引值是否大于數組

length

，如果

可以

比數組

length

大，那麼就令目标數組的

length

等于

可以

，接下來使用

splice

（重寫後的攔截器方法）将value設定到target數組中。如果key已經存在，那麼直接用value替換原數值即可。

• 也就是說vm.$set()的核心是使用

  splice

  方法為數組添加元素

處理對象屬性新增

• target不能是Vue.js執行個體 vm ,或者Vue.js執行個體的根資料對象 this.$data
• 如果target并非響應式資料，即target身上沒有_ob_屬性，說明其并非響應式的，此時無需做任何處理，隻需将key,value設定到target身上即可。
• 如果target是響應式資料，即身上有_ob_屬性。那麼在位target新增屬性key時，同時要讓屬性key也是可偵測的，即通過

  defineReactive

  将新增屬性key轉換成響應式資料即可。

vm.$delete

和

vm.$set()

相反，

vm.$delete

用于删除對象身上的某個屬性。由于Vue2.0使用

Object.defineProperty()

實作變化偵測，故而無法偵測到對象屬性的删除，Vue.js提供了

vm.$set()

方法删除資料的某個屬性。

基本用法回顧

vm.$delete( target,key )
           

實作原理

• 删除屬性後向依賴發送通知，源碼如下

Vue.prototype.$delete = function(target,key){
  // 處理數組調用splice方法
  	if(Array.isArray(target)&& isValidArrayIndex(key)){
		target.splice(key,1);   //splice會自動觸發依賴通知
		return;
	}
	//處理對象屬性
	const ob = target._ob_;
	delete target[key];
	ob.dep.notify();   //通知依賴
}
           

• vm.$delete

  同樣不能操作Vue.js執行個體以及執行個體的根資料對象