总结

秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！

而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。

这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

资料截图 ：

高级前端工程师必备资料包

目录

• 自定义指令
• • 示例1
    • 示例2
• 钩子函数
• 自定义指令与钩子函数的关系

本文主要介绍Vue3中自定义指令和钩子函数的使用方法和它们之间的关系。

自定义指令

在 Vue3 中，自定义指令是一种用于扩展 Vue 的模板语法的方式。自定义指令实际上是一种特殊的属性，可以通过 v- 前缀来应用。

自定义指令能够为元素添加行为，例如将输入框聚焦、滚动到指定位置、懒加载等等，同时可以在指令绑定和解绑时执行一些逻辑，也可以接收参数和修饰符来进行更灵活的控制。

在 Vue3 中，自定义指令通过 directive 函数来定义，在 setup 函数中作为返回值暴露出来，这样就可以在模板中使用。

示例1

举个例子，下面是一个在 Vue3 中使用自定义指令实现输入框聚焦的示例：

<template>
  <input v-focus />
</template>

<script>
import { directive } from 'vue';

const focus = directive((el) => {
 el.focus();
});

export default {
 directives: {
 focus
 }
}
</script>

在上面的代码中，我们定义了一个名为 focus 的自定义指令，并将其注册在组件的 directives 选项中，在模板中使用 v-focus 应用该指令就可以实现输入框聚焦的功能。

示例2

以下是一个使用自定义指令函数的例子。假设有一个需求，输入框中只能输入数字，其他字符输入无效。我们可以通过自定义指令来实现这个功能。

<template>
  <div>
    <input v-number-only type="text" v-model="value" />
  </div>
</template>

<script>
import { defineDirective } from 'vue'

export default {
 setup() {
 const value = ref('')

 return {
 value,
 }
 },
 directives: {
 'number-only': defineDirective((el) => {
 el.addEventListener('input', (e) => {
 const value = e.target.value
 e.target.value = value.replace(/\D/g, '')
 })
 })
 }
}
</script>

在这个例子中，我们定义了一个自定义指令 v-number-only，使用 defineDirective 方法创建了一个钩子函数 el，在该钩子函数中监听输入框的输入事件，并在事件触发时将非数字字符替换为空字符。在模板中使用该指令即可实现只能输入数字的功能。

钩子函数

在 Vue3 中，钩子函数（hook functions）是一种用于在组件生命周期中执行特定操作的函数。类似于 Vue2 中的生命周期钩子，在 Vue3 中也提供了一些特定的钩子函数，可以在组件的不同生命周期阶段中执行一些逻辑。

在 Vue3 中，组件的钩子函数可以放在 setup 函数中，通过直接定义函数来实现。常用的钩子函数包括：

• beforeCreate：在组件实例化之前执行。
• created：在组件实例化之后执行，但是数据观测和事件/生命周期钩子等未挂载。
• beforeMount：在组件挂载之前执行。
• mounted：在组件挂载之后执行。
• beforeUpdate：在组件更新之前执行。
• updated：在组件更新之后执行。
• beforeUnmount：在组件卸载之前执行。
• unmounted：在组件卸载之后执行。

举个例子，下面是一个在 Vue3 中使用钩子函数实现页面标题自动切换的示例：

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="changeTitle">Change Title</button>
  </div>
</template>

<script>
import { onMounted, onBeforeUnmount, ref } from 'vue';


### 最后

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

> ![前端校招面试题精编解析大全](https://img-blog.csdnimg.cn/img_convert/a45b092dea517b3e85e74cbc514dc30f.webp?x-oss-process=image/format,png)

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

> [外链图片转存中...(img-LOaIYzZh-1715832001233)]