Vue3中的自定义指令（defineDirective）和钩子函数（created、mounted、updated

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

• HTML5有哪些新特性？

• Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

• 如何实现浏览器内多个标签页之间的通信？

• ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

• 简述⼀下src与href的区别？

• cookies,sessionStorage,localStorage 的区别？

• HTML5 的离线储存的使用和原理？

• 怎样处理 移动端 1px 被 渲染成 2px 问题？

• iframe 的优缺点？

• Canvas 和 SVG 图形的区别是什么？

JavaScript

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

• 问：0.1 + 0.2 === 0.3 嘛？为什么？

• JS 数据类型

• 写代码：实现函数能够深度克隆基本类型

• 事件流

• 事件是如何实现的？

• new 一个函数发生了什么

• 什么是作用域？

• JS 隐式转换，显示转换

• 了解 this 嘛，bind，call，apply 具体指什么

• 手写 bind、apply、call

• setTimeout(fn, 0)多久才执行，Event Loop

• 手写题：Promise 原理

• 说一下原型链和原型链的继承吧

• 数组能够调用的函数有那些？

• PWA使用过吗？serviceWorker的使用原理是啥？

• ES6 之前使用 prototype 实现继承

• 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

• 事件循环机制 （Event Loop）

举个例子，下面是一个在 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';

export default {
 setup() {
 const title = ref('Welcome to the Page!');
 
 const changeTitle = () => {
 title.value = 'New Title';
 };
 
 const updatePageTitle = (newTitle) => {
 document.title = newTitle;
 };
 
 onMounted(() => {
 updatePageTitle(title.value);
 });
 
 onBeforeUnmount(() => {
 updatePageTitle('Goodbye!');
 });
 
 return {
 title,
 changeTitle
 };
 }
}
</script>

在上面的代码中，我们使用 onMounted 和 onBeforeUnmount 钩子函数来在组件挂载和卸载时更新页面的标题。在 setup 函数中定义了 title 和 changeTitle 变量，onMounted 函数在组件挂载时调用 updatePageTitle 函数更新页面标题为组件标题，onBeforeUnmount 函数在组件卸载时调用 updatePageTitle 函数更新页面标题为“Goodbye!”。

自定义指令与钩子函数的关系

在 Vue3 中，自定义指令和钩子函数密切相关。

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

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

你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

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

[外链图片转存中…(img-6qZELjk3-1715832043340)]
[外链图片转存中…(img-seR2xtR2-1715832043341)]