❶ vue directives指令总结
Vue 指令与组件之间的关系在初学阶段可能显得有些相似，然而，它们实际上处于不同的层级。可以将组件比作一个整体，就像房屋，内部包含窗户、门、桌椅、柜子等子组件。相比之下，指令是附着于组件上的功能或行为，如门可开闭、窗户可启闭，桌子可折叠，柜子可开关等。
具体来说，组件是一个独立的实体，组件与组件之间的关系通常呈现为树状结构。而Vue指令用于调整或增强组件的默认行为，甚至可以在同一个组件上叠加多个指令，赋予它多种功能，比如`v-if`指令可以用来控制组件的安装或卸载。
指令的生命周期定义了它们在组件生命周期中的行为：
1. **bind**：只调用一次，在指令第一次绑定到元素时执行，用于进行初始化设置。
2. **inserted**：当被绑定元素插入父节点时调用，此时确保父节点存在，但可能还未被插入文档中。
3. **update**：在组件的VNode更新时调用，但可能发生在子VNode更新之前，指令的值可能发生变化或保持不变，通过比较新旧值可以决定是否忽略不必要的模板更新。
4. **componentUpdated**：在指令所在组件的VNode及其子VNode全部更新后调用，用于执行在组件更新后的操作。
5. **unbind**：只调用一次，在指令与元素解绑时执行。
在Vue指令生命周期的参数中：
1. **el**：指的是指令绑定的元素，可以用来直接操作DOM，即放置指令的元素。
2. **binding**：是一个对象，包含多个属性，详细说明见官方文档。
3. **vnode**：表示Vue编译生成的虚拟节点。
4. **oldVnode**：表示上一个虚拟节点，仅在`update`和`componentUpdated`钩子中可用。
Vue指令的应用实例：
1. **操作DOM**：通过指令与DOM元素的结合，可以实现对页面元素的动态控制。
2. **集成第三方插件**：指令可以作为与第三方插件交互的桥梁，使插件功能更好地与Vue应用整合。
3. **扩展第三方组件指令**：例如，自定义指令可以用来扩展第三方组件的功能，实现更灵活的应用场景。