50+Vue经典面试题源码级详解（33）

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情

前言

小伙伴们好，这是村长《Vue经典面试题源码级详解》系列文章第33题，前面已完成题目合集在此： 历时一个月，2.6W字！50+Vue经典面试题源码级详解，你值得收藏！

学习群

我组织了一个面试学习群，关注村长公众号村长学前端，回复“加群”，大家一起卷~

相关学习资源

本系列有配套视频，思维导图和开源项目，大家学习同时千万不要忘了三连 + 关注 + 分享，有道是喝水不忘挖井人~

• 视频教程：56道经典Vue面试题详解
• 思维导图：Vue面试专题
• 配套代码：vue-interview

33-你写过自定义组件吗？使用场景有哪些？

分析

这是一道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，添加到特定属性中。

sfc.vuejs.org/#eyJBcHAudn…