18.自定义指令及其原理.md

指令本质是装饰器，是vue对HTML元素的扩展，给HTML元素增加自定义功能。编译DOM时，会找到指令对象，执行指令的相关方法。

自定义指令有五个生命周期（也叫钩子函数），分别是 bind、inserted、update、componentUpdated、unbind

1. bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

2. inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

3. update：被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。

4. componentUpdated：被绑定元素所在模板完成一次更新周期时调用。

5. unbind：只调用一次，指令与元素解绑时调用。

原理

1、在生成AST语法树时，遇到指令会给当前元素添加directives [dɪ'rektɪvz] 属性

2、通过genDirectives生成指令代码

3、在patch前将指令的钩子提取到cbs中，在patch过程中调用对应的钩子

4、当执行指令对应钩子函数时，调用对应指令定义的方法