Vue2源码【8-6】指令

“指令”这部分源码，也容易看得晕头转向，这部分代码贯穿了整个核心流程，是没有独立出来的。而常见的指令v-bind、v-on、v-model、v-if v-show等等都是通过这套机制来实现的。

这篇文章干货不多，主要是再对前面已经讲过原理的各种指令的实现有一个宏观的认识。

updateDirectives的核心是_update函数 #知道标题该结论就行了

Vue.directive ==> Vue.options.directives

在 patch 过程中，会调用 createElm ==> invokeCreateHooks 在调用cbs.create的时候，调用预设的updateDirectives

在 updateDirectives 方法中，如果虚拟DOM的 data.directives 属性存在，会调用内部方法 _update 。该方法比较很重要，自定义指令提供的钩子都在该函数中进行处理，下面分步详细解读该函数。

指令的这几个生命周期钩子，调用时机全都在这个_update函数中。 生命周期就不多说，官方文档已经描述了其实现效果，照着实现就行了。

• v-bind 普通属性 + class + style #都是老老实实增删改 #由钩子函数带动
• v-on： 之前关于事件系统的文章已经有说明了
• v-model：也很简单，能扣的细节，已经在之前的文章中讲过了
• v-if v-show：如下

v-if v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；v-show 就简单得多：不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

• 带有 v-if 指令的模板会编译成根据数据源真假值来调用具体辅助方法的渲染函数，v-if 会根据数据源真假值来决定是否渲染该节点。
• v-show 指令根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。
  • 在调用处理指令的钩子函数 updateDirectives 时，v-show 指令有所不同，相当于 v-show 内部实现了自定义指令的 bind、update、unbind 三个阶段的钩子函数。