Vue3中的自定义指令和钩子函数
一、什么是自定义指令
除了核心功能默认内置的指令（v-model 和 v-show等），Vue 也允许注册自定义指令,对普通DOM元素进行底层操作，这时候就会用到自定义指令。
二、如何自定义指令
自定义指令分为全局自定义指令和局部自定义指令。
1、全局自定义指令
全局注册指令又分函数注册形式、对象注册形式。
1）函数注册形式
语法：Vue.directive("指令名", function(){})
比如，定义一个指令，让绑定的dom元素颜变为指定的值，代码如下：
//定义全局的自定义指令(函数注册形式)
app.directive("mycolor",(el,binding)=>{
        el.style.color = binding.value;
    })
使用：通过 v-指令名:属性名.修饰符="value值" 来使用。
如下，在组件中通过v-myname来使用刚才自定义的指令。
    const app = Vue.createApp({
        data(){
            return{
                mycolor:"red"
            }
        },
        template:
        `<div v-mycolor="mycolor">
        hello world
        </div>`
    });
2）对象注册形式
语法：Vue.directive("name", {} )
比如，定义了一个表单元素自动聚焦的指令，在js中写入的代码如下：
//定义全局的自定义指令(对象注册形式)
    app.directive("focus",{
        mounted(el){
            el.focus();
        }
    })
2、局部自定义指令
语法：先定义，然后在组件内通过directives属性引入，或者直接通过在组件内设置directives属性来定义指令内容。
比如，通过先在组件外定义，然后通过directives属性引入方式实现表单元素自动聚焦的功能代码如下：
<script>react router 和vue router
//定义局部自定义指令
    const dirFocus = {
        focus:{
            mounted(el){
                el.focus();
            }
        }
    }
    const app = Vue.createApp({
  //引入局部自定义指令
        directives:dirFocus,
        template:
        `<input v-focus/>` /* 通过v-focus使用局部自定义指令 */
    });
const vm = app.mount("#root")
</script>
通过直接通过在组件内设置directives属性来定义指令内容方式实现表单元素自动聚焦的功能代码如下：
<script>
    const app = Vue.createApp({
//直接通过在组件内设置directives属性来定局部指令内容
        directives:{
            focus:{
            mounted(el){
                el.focus();
            }
        }
        },
        template:
        `<input v-focus/>` //还是通过v-name来使用指令
    });
    const vm = app.mount("#root")
</script>
三、自定义指令的钩子函数
1.什么是钩子函数
钩子函数是Windows消息处理机制的一部分，通过设置"钩子"，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。
总结一下：
①是个函数，在系统消息触发时被系统调用。
②不是用户自己触发的。
③钩子函数的名称是确定的，当系统消息触发，自动会调用。
2.常见的钩子函数
react的生命周期函数、vue的生命周期函数、vue的自定义指令钩子函数。
3.自定义指令的钩子函数
①created：自定义指令所在组件, 创建后执行。
②beforeMount：就是Vue2.x中的bind，自定义指令绑定了元素之后调用。只调用一次。注意，此时渲染没有完成。
③mounted：就是Vue2.x中的 inserted，自定义指令所在DOM元素插入到父DOM后调用，渲染已完成（最重要）。
④beforeUpdate：自定义指令所在的DOM元素被更新之前调用。
⑤updated：就是Vue2.x中的 componentUpdated，一旦组件被更新，就会调用这个钩子。
⑥beforeUnmount：绑定的DOM元素被销毁之前调用。
⑦unmounted：绑定的DOM元素被销毁之后调用。
下面是示例代码，点击更新按钮，会将div标签中的内容更新，点击删除按钮，会将div标签从dom树结构中删除。
<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data(){
            return{
                content:"hello",
                condition:true
            }
        },
        methods:{
            //click绑定的事件，点击后，会更改content数据，进而更新dom元素内容
            handleUpdate(){
                this.content = "bye";
            },
            //click绑定的事件，点击后，condition变为false，会从dom结构中删除被绑元素
            handleDelete(){
                this.condition = false;
            }
        },
        template: `
        <div v-myDirective v-if="condition">{{content}}</div>
        <button @click="handleUpdate" >更新</button>
        <button @click="handleDelete" >移除</button>`
    });
    app.directive("myDirective", {
        //created:绑定元素属性或事件被应用之前调用，自定义指令所在组件, 创建后执行。
        created(el, binding, vnode, prevVnode) {
            console.log("created")
            console.log(binding)
            console.log(vnode)
        },
        //beforeMount:指令绑定到元素后调用。只调用一次。
        beforeMount(){
            console.log("beforeMount")
        },
        //mounted:元素插入父DOM后调用。
        mounted(){
            console.log("mounted")
        },
        //beforeUpdate:vue3新增，在元素本身被更新之前调用。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。