深入淺出vue.js---全局API的實現原理----Vue.nextTick、Vue.set、Vue.delete

一、Vue.nextTick

Vue.nextTick([callback,context]);

（1）參數

• { Function } [callback]
• { Object } [context]

（2）用法

在下次DOM更新渲染結束之後執行延遲迴調，修改數據之後立即使用這個方法獲取更新後的DOM。

（3）示例

<!-- 修改數據 -->
vm.msg = 'Hello';
<!-- DOM還沒有更新 -->
Vue.nextTick(function({
	<!-- DOM更新了 -->
}))
作爲一個Promise使用（Vue.js 2.1.0版本新增的）
Vue.nextTick()
.then(function(){
	<!-- DOM更新了 -->
})

（4）Vue.nextTick的實現原理與vm.$nextTick一樣

import { nextTick } from '../util/index';
Vue.nextTick = nextTick;

二、Vue.set

Vue.set(target,key,value);

（1）參數

• { object | Array } target
• { string | number } key
• { any } value

（2）返回值

設置的值

（3）用法

設置對象的屬性。如果對象是響應式的，確保屬性被創建後也是響應式的，同時觸發視圖更新。這個方法主要用於避開Vue不能檢測屬性被添加的限制。

注意：對象不能是Vue.js實例或者Vue.js實例的根數據對象。

（4）Vue.set 與 vm.$set的實現原理同理

import { set } from '../observer/index';
Vue.set = set;

三、Vue.delete

Vue.delete(target,key);

（1）參數

• { Object | Array } target
• { String | number } key/index

（2）用法

刪除對象的屬性。如果對象是響應式的，確保刪除能觸發更新視圖。這個方法主要用於避開Vue.js不能檢測到屬性被刪除的限制。

（3）Vue.delete與 vm.$delete的實現原理相同

import { del } from '../observer/index';
Vue.delete = del;