除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外,Vue 还允许你注册自定义的指令 (CustomDirectives)。
1.自定义指令的目的和简单介绍
自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。
一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。
举例:
在某个场景下,需要一进入页面或者打开某个弹窗就聚焦到指定的输入框。
局部的写法:
<script setup>
const vFocus = {
created(el, binding, vnode) {
},
beforeMount(el, binding, vnode) {
},
mounted(el) {
el.focus()
},
beforeUpdate(a,b,c,prevNode) { //! 第四个参数 prevNode 只在beforeUpdate和updated才有!
},
updated() {},
beforeUnmount() {
// 当指令绑定的元素 的父组件销毁前调用。 <简单讲,指令元素的父组件销毁前调用>
},
unmounted() {},// 当指令与元素解除绑定且父组件已销毁时调用。
}
</script>
<template>
<input v-focus>
</template>
全局的写法:
import { createApp } from 'vue'
const app = createApp(App)
app.directive('focus',{
created(el, binding, vnode) {
},
beforeMount(el, binding, vnode) {
},
mounted() {
el.focus()
},
beforeUpdate(a,b,c,prevNode) { //! 第四个参数 prevNode 只在beforeUpdate和updated才有!
},
updated() {},
beforeUnmount() {
// 当指令绑定的元素 的父组件销毁前调用。 <简单讲,指令元素的父组件销毁前调用>
},
unmounted() {},// 当指令与元素解除绑定且父组件已销毁时调用。
})
使用全局注册需注意得写在mount(‘#app’)之前
我们可以发现对比vue2来看vue3里自定义指令似乎在生命周期这块发生了某些变化