2022-09-16Vue00
请注意,本文编写于 583 天前,最后修改于 583 天前,其中某些信息可能已经过时。

你写过自定义指令吗?使用场景有哪些?

分析

这是一道API题,我们可能写的自定义指令少,但是我们用的多呀,多举几个例子就行。


体验

定义一个包含类似组件生命周期钩子的对象,钩子函数会接收指令挂钩的dom元素:

const focus = {
  mounted: (el) => el.focus()
}

export default {
  directives: {
    // enables v-focus in template
    focus
  }
}
<input v-focus />
<input v-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开头方便的定义自定义指令,更简单了!

知其所以然

编译后的自定义指令会被withDirective函数装饰,进一步处理生成的vnode,添加到特定属性中。

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSdcblxuY29uc3QgbXNnID0gcmVmKCdIZWxsbyBXb3JsZCEnKVxuXG5jb25zdCB2Rm9jdXMgPSB7XG4gIG1vdW50ZWQoZWwpIHtcbiAgICAvLyDojrflj5ZpbnB1dO+8jOW5tuiwg+eUqOWFtmZvY3VzKCnmlrnms5VcbiAgICBlbC5mb2N1cygpXG4gIH1cbn1cbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxoMT57eyBtc2cgfX08L2gxPlxuICA8aW5wdXQgdi1tb2RlbD1cIm1zZ1wiIHYtZm9jdXM+XG48L3RlbXBsYXRlPiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHtcbiAgICBcInZ1ZVwiOiBcImh0dHBzOi8vc2ZjLnZ1ZWpzLm9yZy92dWUucnVudGltZS5lc20tYnJvd3Nlci5qc1wiXG4gIH1cbn0ifQ==

本文作者:毛超颖

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!