vue2自定义指令的生命周期
时间: 2024-03-07 08:45:57 浏览: 92
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Vue2中自定义指令的生命周期包括以下几个阶段:
1. bind:在指令第一次绑定到元素时调用。在这个阶段,可以执行一次性的初始化设置。
2. inserted:在被绑定元素插入父节点时调用。如果指令绑定的元素是动态插入的,那么这个钩子函数将在父节点插入时触发。
3. update:在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了变化,也可能没有变化。可以通过比较更新前后的值来执行相应的操作。
4. componentUpdated:在组件的 VNode 及其子 VNode 全部更新后调用。如果指令绑定的元素是动态插入的,那么这个钩子函数将在父节点全部更新后触发。
5. unbind:在指令与元素解绑时调用。可以执行一些清理操作,如移除事件监听器等。
需要注意的是,以上生命周期钩子函数中的参数包括 el(指令所绑定的元素)、binding(一个对象,包含指令的信息)、vnode(Vue 编译生成的虚拟节点)、oldVnode(上一个虚拟节点)等。
阅读全文