Vue 自定义指令实践

Vue自定义指令

1. 一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。
2. 在 <script setup> 中，任何以 v 开头的驼峰式命名的变量都可以被用作一个自定义指令。eg:  在上面的例子中，vFocus 即可以在模板中以 v-focus 的形式使用。

指令对象的生命周期钩子函数：

 1 const myDirective = {
 2   // 在绑定元素的 attribute 前
 3   // 或事件监听器应用前调用
 4   created(el, binding, vnode, prevVnode) {
 5     // 下面会介绍各个参数的细节
 6   },
 7   // 在元素被插入到 DOM 前调用
 8   beforeMount(el, binding, vnode, prevVnode) {},
 9   // 在绑定元素的父组件
10   // 及他自己的所有子节点都挂载完成后调用
11   mounted(el, binding, vnode, prevVnode) {},
12   // 绑定元素的父组件更新前调用
13   beforeUpdate(el, binding, vnode, prevVnode) {},
14   // 在绑定元素的父组件
15   // 及他自己的所有子节点都更新后调用
16   updated(el, binding, vnode, prevVnode) {},
17   // 绑定元素的父组件卸载前调用
18   beforeUnmount(el, binding, vnode, prevVnode) {},
19   // 绑定元素的父组件卸载后调用
20   unmounted(el, binding, vnode, prevVnode) {}
21 }

自定义指令的简化形式： 当仅仅需要在 mounted 和 updated 上实现相同的行为，除此之外并不需要其他钩子。这种情况下我们可以直接用一个函数来定义指令：

<div v-color="red"></div>

1 app.directive('color', (el, binding) => {
2   // 这会在 `mounted` 和 `updated` 时都调用
3   // 这里可以拿到上述的定义的颜色值 red
4   el.style.color = binding.value
5 })

自定义指令同时也可以接收 对象字面量 和 任何合法的JavaScript 表达式。

 <div v-demo="{ color: 'white', text: 'hello!' }"></div> 

1 app.directive('demo', (el, binding) => {
2   console.log(binding.value.color) // => "white"
3   console.log(binding.value.text) // => "hello!"
4 })

在组件上使用自定义指令：不建议 可能会出现未知的错误存在。

1. 当在组件上使用自定义指令时，它会始终应用于组件的根节点，和透传 attributes 类似。
2.  在组件上使用自定义指令是 应用于 组件模版的根节点，但如果组件是一个存在多个根节点的组件的话 可能会出现未知的错误。因此不建议在组件上使用自定义组件。