指令的奥秘

指令的职责是当表达式的值改变时，将其产生的连带影响响应式地作用于DOM。指令相关的知识贯穿vue内部各个核心技术。在模块解析阶段，我们在将指令解析到AST，然后使用AST生成代码字符串的过程中实现某些内置指令的功能，最后在虚拟DOM渲染的过程中触发自定义指令的钩子函数使指令生效。

• 在模板解析阶段，会将节点上的指令解析处理并添加到AST的dirctives属性中。
• 随后directives数据会传递到VNode中，接着可以通过vnode.data.directives获取一个节点所绑定的指令。
• 最后，当虚拟DOM进行修补时，会根据节点对比结果触发一些钩子函数。更新指令的程序会监听create,update和destroy钩子函数。（使用自定义指令，可以监听5种钩子函数：bind,inserted,update,componentUpdated,unbind）。指令的钩子函数被触发后，就说明指令生效了。

自定义指令

内置指令

有些内置指令是在模板编译阶段实现的。在代码生成时，通过生成一个特殊的代码字符串来实现指令的功能。

v-if/v-show

• v-if相当于真正的条件渲染，当条件为假时，元素不会被渲染。
• v-show不管初始条件是什么，第一次元素总被渲染。之后的切换相当于display:none和display:block切换。

TIP

控制手段：v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除。 编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换 编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染

• v-show 由false变为true的时候不会触发组件的生命周期
• v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestroy、destroyed方法 性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗