vue3自定义指令

• 自定义指令主要是为了重用涉及普通元素的底层DOM访问的逻辑

• 一个自定义指令由一个包含类似生命周期钩子的对象来定义，钩子函数中的参数是指令所绑定的元素

• 在<script setUp>中，任何以v开头的驼峰命名的变量都可以被用作一个自定义指令

    <script setup> 
        const vFocus = { mounted: (el) => el.focus() }
    </script> 
    
    <template> 
        <input v-focus /> 
    </template>

• 注册一个应用级指令

const app = createApp({}) 
app.directive('focus', {})

• 指令钩子函数

const vFocus = {
    created(el, binding, vnode, prevVnode) {},
    
    beforeMount(el, binding, vnode, prevVnode) {},
    
    mounted(el, binding, vnode, prevVnode) {},
    
    beforeUpdate(el, binding, vnode, prevVnode) {},
    
    updated(el, binding, vnode, prevVnode) {},
    
    beforeUnmount(el, binding, vnode, prevVnode) {},
    
    unMounted(el, binding, vnode, prevVnode) {}

}

• 指令传参

<div v-demo="{ color: 'white', text: 'hello!' }"></div>
app.directive('demo', (el, binding) => { 
    console.log(binding.value.color)  // "white" 
    console.log(binding.value.text)  // "hello!" 
})