深入浅出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;