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

专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

• HTML+CSS
• JavaScript
• 前端框架
• 前端性能优化
• 前端监控
• 模块化+项目构建
• 代码管理
• 信息安全
• 网络协议
• 浏览器
• 算法与数据结构
• 团队管理
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、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, ‘’)
})
})
}
}

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


## 钩子函数


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


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


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


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

{{ title }}

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


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


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


自定义指令是一种在模板中直接操作 DOM 的方法，可以在组件中定义具有特定行为的指令，并在模板中使用它们来实现某些功能。


钩子函数是在生命周期中执行的函数，可以在组件的不同阶段执行特定的操作。自定义指令可以在钩子函数中定义和使用。


自定义指令的实现方式与 Vue2 中有些不同。Vue3 中，自定义指令不再具有 `bind` 和 `update` 钩子函数。


关于自定义指令和钩子函数的关系，可以简单理解为：


* 自定义指令是一个对象，其中包含了一系列钩子函数（生命周期函数）；
* 钩子函数是自定义指令的一部分，它们在指令的生命周期中被触发，从而实现相关的功能。


例如，可以创建一个名为`myDirective`的自定义指令，具有`beforeMount`和`mounted`钩子函数。在模板中引用该指令可以这样写：

自定义指令内容

在代码中实现该指令可以这样写：

const myDirective = {
beforeMount(el, binding, vnode, prevVnode) {
// 在绑定元素的父组件被挂载之前调用
},
mounted(el, binding, vnode, prevVnode) {
// 在绑定元素的父组件被挂载后调用
}
}

const app = createApp({})
app.directive(‘myDirective’, myDirective)

以上示例中，`myDirective`是自定义指令的名称，`beforeMount`和`mounted`是该指令的钩子函数。`createApp({})`用于创建 Vue3 实例，`app.directive('myDirective', myDirective)`用于将自定义指令注册到该实例中。


### 基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

##### 网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

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

![](https://img-blog.csdnimg.cn/img_convert/4aee0d4c7f9fae6b913955e7ffab0c4e.webp?x-oss-process=image/format,png)


CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

![](https://img-blog.csdnimg.cn/img_convert/4b4b240aeed1e7e7584c0cf2da7b67ed.webp?x-oss-process=image/format,png)


##### 动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

![](https://img-blog.csdnimg.cn/img_convert/594dc2b64d34bb465a9373c65278eb5f.webp?x-oss-process=image/format,png)

831966885)]


##### 动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

[外链图片转存中...(img-th3b7K1x-1715831966885)]