Vue面试题：你用过自定义指令吗？

Vue面试题：你用过自定义指令吗？

引用

CSDN

1.

https://blog.csdn.net/qq_42220848/article/details/140386045

Vue面试中，自定义指令是一个常见的考察点。本文将从定义、使用场景、具体使用方法、常用指令以及Vue3的变化等多个维度，全面解析Vue自定义指令的相关知识，帮助你从容应对面试中的相关问题。

1. 定义

Vue有一些内置指令，如：v-model、v-show等，同时也支持用户注册自定义指令来扩展Vue的能力。

2. 何时用

自定义指令主要完成一些可复用低层级DOM操作。

3. 如何用

使用自定义指令主要分为定义、注册、使用三步：

• 自定义指令有两种方式：对象和函数形式，前者类似组件定义，有各种生命周期，后者只会在mounted和updated时执行；（个人只对对象形式印象深点）
• 注册自定义指令类似组件，可以使用app.directive()全局注册，或者使用{directives:{xxx}}局部注册。
• 在使用时在注册名称前加上v-即可，比如v-focus;

4. 常用指令

在项目中常用到的一些自定义指令，例如：v-premission按钮权限。

5. Vue3变化

Vue2的自定义指令钩子函数

• bind：指令绑定到元素后调用，只调用一次。
• inserted：元素插入父DOM后调用。
• update：当元素更新，子元素尚未更新时调用。
• componentUpdate：被绑定的元素所在模板完成一次更新周期，就调用。
• unbind：一旦指令被移除就调用，只调用一次。

Vue3的自定义指令钩子函数

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

对象写法的自定义指令

函数写法的自定义指令