Vue自定义指令

发表于 | 分类于 |

Vue 指令基本原理

Vue 指令本质上是装饰器，是对 Vue 组件的扩展，相对组件的生命周期可以更精准的对目标组件（元素）进行控制，当然 Vue3 将指令和组件的生命周期进行了对应，更加直观。

我所理解的实现原理为：

  1. 注册指令（全局、局部）
  2. 解析/编译模板
  3. 解析到自定义指令
  4. 查找第一步注册的指令（没有就抛出异常
  5. 将注册的指令添加到组件对应的生命周期内并注册回调函数
  6. 更新组件

vue2.x 指令的钩子函数

bind - 指令绑定到元素后发生。只发生一次。
inserted - 元素插入父 DOM 后发生。
update - 当元素更新，但子元素尚未更新时，将调用此钩子。
componentUpdated - 一旦组件和子级被更新，就会调用这个钩子。
unbind - 一旦指令被移除，就会调用这个钩子。也只调用一次。

vue3 指令的钩子函数

created - 新的！在元素的 attribute 或事件侦听器应用之前调用。
bind → beforeMount
inserted → mounted
beforeUpdate：新的！这是在元素本身更新之前调用的，很像组件生命周期钩子。
update → 移除！有太多的相似之处要更新，所以这是多余的，请改用 updated。
componentUpdated → updated
beforeUnmount：新的！与组件生命周期钩子类似，它将在卸载元素之前调用。
unbind -> unmounted

Vue 指令实现

实际上指令实现比想象中的简单，参考官方文档即可：

Vue2.x

1
2
3
4
5
6
7
Vue.directive("custom-directive", {
	bind(el, binding, vnode, prevVnode) {},
	inserted() {},
	update() {},
	componentUpdated() {},
	unbind() {},
});

Vue3

1
2
3
4
5
6
7
8
9
app.directive("custom-directive", {
	created(el, binding, vnode, prevVnode) {},
	beforeMount() {},
	mounted() {},
	beforeUpdate() {},
	updated() {},
	beforeUnmount() {},
	unmounted() {},
});

[越努力，越幸运！]