Vue面试题32：你用过自定义指令吗？（总结自B站up主‘前端杨村长’视频，仅供自用学习）

• 分析：这是一道API题，我们可能写的自定义指令少，但是我们用的多呀，多举几个例子就行；
• 使用：

// Vue2
directives: {
  focus: {
    inserted(el, binding, vnode) {
      el.focus()
    }
  }
}
// Vue2全局注册
Vue.directive("focus", {
  inserted(el, binding, vnode) {
    el.focus()
  },
})
// Vue3 setup
const vFocus = {
  mounted(el) {
    el.focus()
  }
}
// Vue3全局注册
app.directive("focus", {
  mounted: (el) => {
    el.focus()
  },
})

• 思路

  • 1.定义；
  • 2.何时用；
  • 3.如何用；
  • 4.常用指令；
  • 5.vue3变化；

• 回答范例

  • 1.Vue有一组默认指令，比如v-model或v-for，同时Vue也允许用户注册自定义指令来扩展Vue能力；
  • 2.自定义指令主要完成一些可复用低层级DOM操作；
  • 3.使用自定义指令分为定义、注册和使用三步：
    • 定义自定义指令有两种方式：对象和函数形式，前者类似组件定义，有各种生命周期；后者只会在mounted和updated时执行；
    • 注册自定义指令类似组件，可以使用app.directive()全局注册，或者使用{directives:{xxx}局部注册；
    • 使用时在注册名称前加上v-即可，比如v-focus；
  • 4.我在项目中常用到一些自定义指令，例如：
    • 复制粘贴v-copy
    • 长按v-longpress
    • 防抖v-debounce
    • 图片懒加载v-lazy
    • 按钮权限v-premission
    • 页面水印v-waterMarker
    • 拖拽指令v-draggable
  • 5.vue3中指令定义发生了比较大的变化，主要是钩子的名称保持和组件一致，这样开发人员容易记忆，不易犯错。另外在V3.2之后，可以在setup中以一个小写v开头方便的定义自定义指令了；