异步更新队列
vue.js默认异步更新DOM,每当观察到数据变化时,Vue就开始一个队列,将同一事件循环内所有数据的变化缓存起来。如果一个watcher被多次触发,只会推入一次到队列中,等到下一次事件循环,Vue将清空队列,只进行必要的DOM更新。
如果想要在更新数据之后完成Vue.js完成更新DOM,可以在数据变化之后使用vue.nextTick(callback)
回调在DOM更新完成后调用
自定义指令
基础
可自定义全局指令和局部指令
Vue.directive(id,definition) //注册全局指令
钩子函数
- bind:只调用一次,在指令第一次绑定到元素上调用
- update:在bind之后立即以初始值为参数第一次调用,之后每次当绑定值发生变化时调用,参数为新值和旧值。
- unbind:只调用一次,在指令从元素上解绑时调用。
Vue.directive('my-directive',{
bind: function () {
// 准备工作,和只需要运行一次的高耗任务
},
update: function (newValue,oldValue) {
//值更新时调用
},
unbind: function () {
//清理工作
}
})
//调用
<div v-my-directive=""></div>
指令实例属性
所有的钩子函数将被复制到实际的指令对象中,钩子内的this指向这个指令对象,这个对象暴露了一些有用的属性:
- el: 指令绑定的元素
- vm: 拥有该指令的上下文ViewModel
- expression 指令的表达式
- arg 指令的参数
- name 指令的名字
- modifiers 一个对象,包含指令的修饰符
- descriptor 一个对象,包含指令的解析结果