指令在Vue.js 2.0中的变化

       由于指令在 Vue.js2.0 中发生了比较大的变化,Vue.js 2.0中的指令功能更为单一,很多和组件重复的功能和作用都进行了删除,指令也更专注于本身作用域的操作,而尽量不去影响指令外的 DOM 元素及数据。

       钩子函数增加了一个 componentUpdated,当整个组件都完成了update 状态后即所有 DOM 都更新后调用该钩子函数,无论指令接受的参数是否发生变化。

       在 Vue.js 2.0 中取消了指令实例这一概念,即在钩子函数中的 this 并不能指向指令的相关属性。指令的相关属性均通过参数的形式传递给钩子函数。

Vue.directive('my-directive', {
  bind : function(el, binding, vnode) {
   console.log('~~~~~~~~~~bind~~~~~~~~~');
   console.log('el', el);
   console.log('binding', binding);
   console.log('vnode', vnode);
 },
  update : function(el, binding, vnode, oldVNode) {    ....
 },
  componentUpdated(el, binding, vnode, oldVNode) {    ....
 },
  unbind : function(el, binding, vnode) {
   ....
 }
});

      在 Vue.js 1.0 的实例中的属性大部分都能在 binding 中找到,vnode 则主要包含了节点的相关信息,有点类似于 fragment 的作用。钩子函数 update 对比 Vue.js 1.0 也有了以下两点变化:
1 指令绑定 bind函数执行后不直接调用 update 函数。
2 只要组件发生重绘,无论指令接受的值是否发生变化,均会调用 update 函数。如果需要过滤不必要的更新,则可以使用 binding.value == binding.oldValue 来判断。

       钩子函数接受的参数 binding 对象为不可更改,强行设定 binding.value 的值并不会引起实际的改动。如果非要通过这种方式进行修改的话,只能通过 el 直接修改 DOM 元素。