vue3 学习笔记 (三)——vue3 自定义指令

作者：码仔

2021 年 11 月 25 日
本文字数：2091 字
阅读完需：约 7 分钟

自定义指令分为全局和局部两种类型，大家并不陌生。今天我们就讲讲在 vue3 中，自定义指令定义、使用以及钩子函数都有哪些变化？

一、注册自定义指令

以下实例都是实现一个输入框自动获取焦点的自定义指令。

1.1、全局自定义指令

在 vue2 中，全局自定义指令通过 directive 挂载到 Vue 对象上，使用 Vue.directive('name',opt)。

实例 1：Vue2 全局自定义指令

Vue.directive('focus',{ inserted:(el)=>{  el.focus() }})

复制代码

inserted 是钩子函数，在绑定元素插入父节点时执行。

在 vue3 中，vue 实例通过 createApp 创建，所以全局自定义指令的挂载方式也改变了， directive 被挂载到 app 上。

实例 2：Vue3 全局自定义指令

//全局自定义指令app.directive('focus',{ mounted(el){  el.focus() }})
//组件使用<input type="text" v-focus />

复制代码

1.2、局部自定义指令

在组件内部，使用 directives 引入的叫做局部自定义指令。Vue2 和 Vue3 的自定义指令引入是一模一样的。

实例 3：局部自定义指令

<script>//局部自定义指令const defineDir = { focus:{  mounted(el){   el.focus()  } }}export default { directives:defineDir, setup(){}}</script>

复制代码

二、自定义指令中的生命周期钩子函数

一个指令定义对象可以提供如下几个钩子函数（都是可选的，根据需要引入）

created ：绑定元素属性或事件监听器被应用之前调用。该指令需要附加需要在普通的 v-on 事件监听器前调用的事件监听器时，这很有用。
beforeMounted ：当指令第一次绑定到元素并且在挂载父组件之前执行。
mounted ：绑定元素的父组件被挂载之后调用。
beforeUpdate ：在更新包含组件的 VNode 之前调用。
updated ：在包含组件的 VNode 及其子组件的 VNode 更新后调用。
beforeUnmounted ：在卸载绑定元素的父组件之前调用
unmounted ：当指令与元素解除绑定且父组件已卸载时，只调用一次。

实例 3：测试指令内生命周期函数执行

<template> <div>  <input type="text" v-focus  v-if="show"><br>  <button @click="changStatus">{{show?'隐藏':'显示'}}</button> </div></template>
//局部自定义指令const autoFocus = { focus:{  created(){   console.log('created');  },  beforeMount(){   console.log('beforeMount');  },  mounted(el){   console.log('mounted');  },  beforeUpdated(){   console.log('beforeUpdated')  },  updated(){   console.log('updated');  },  beforeUnmount(){   console.log('beforeUnmount');  },  unmounted(){   console.log('unmounted');  } },}import { ref } from 'vue'export default { directives:autoFocus, setup(){  const show = ref(true)  return {   show,   changStatus(){    show.value = !show.value   }  } }}

复制代码

通过点击按钮，我们发现创建 input 元素的时候，会触发 created、beforeMount 和 mounted 三个钩子函数。

隐藏 input 元素的时候，会触发 beforeUnmount 和 unmounted 。

然而我们添加的 beforeUpdate 和 updated 函数并没有执行。

此时我们把 input 元素上的 v-if 修改成 v-show 就会执行上述两个方法了，具体的执行情况自行验证下。

从 vue2 升级到 vue3 ，自定义指令的生命周期钩子函数发生了改变，具体变化如下：

bind 函数被替换成了 beforeMounted。
update 被移除。
componentUpdated 被替换成了 updated。
unbind 被替换成了 unmounted。
inserted 被移除。

三、自定义指令钩子函数的参数

钩子函数被赋予了以下参数：

el：指令所绑定的元素，可以直接操作 DOM。
binding：是一个对象，包含该指令的所有信息。

binding 包含的属性具体的分别为：

arg 自定义指令的参数名。
value 自定义指令绑定的值。
oldValue 指令绑定的前一个值。
dir 被执行的钩子函数
modifiers：一个包含修饰符的对象。

<template> <div>  <div v-fixed >定位</div> </div></template>
<script>//自定义指令动态参数const autoFocus = { fixed:{  beforeMount(el,binding){   console.log('el',el)   console.log('binding',binding)  } }}export default { directives:autoFocus, setup(){ }}</script>

复制代码

四、自定义指令参数

自定义指令的也可以带参数，参数可以是动态的，参数可以根据组件实例数据进行实时更新。

实例 4：自定义指令动态参数

<template> <div>  <div v-fixed:pos="posData" style="width:100px;height:100px;background:grey">定位</div> </div></template>
<script>//自定义指令动态参数const autoFocus = { fixed:{  beforeMount(el,binding){   el.style.position = "fixed"   el.style.left = binding.value.left+'px'   el.style.top = binding.value.top + 'px'  } }}export default { directives:autoFocus, setup(){  const posData = {   left:20,   top:200  }  return {   posData,  } }}</script>

复制代码

什么时候需要自定义指令？

需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。
需要将某些功能在指定 DOM 元素上使用，但对于需要操作大量 DOM 元素或者大变动时候，推荐使用组件，而不是指令。

发布于: 3 小时前阅读数: 5

原文链接:【http://xie.infoq.cn/article/7d62a6549c94bd4d4936250b1】。文章转载请联系作者。

码仔

关注

还未添加个人签名 2019.06.26 加入

还未添加个人简介

发布

暂无评论

创作场景

vue3 学习笔记 (三)——vue3 自定义指令

一、注册自定义指令

二、自定义指令中的生命周期钩子函数

三、自定义指令钩子函数的参数

四、自定义指令参数

码仔

评论