vue3 学习笔记 (三)——vue3 自定义指令，【最全总结】

以下实例都是实现一个输入框自动获取焦点的自定义指令。

1.1、全局自定义指令

在vue2中，全局自定义指令通过 directive 挂载到 Vue 对象上，使用 Vue.directive(‘name’,opt)。

实例1：Vue2 全局自定义指令

Vue.directive(‘focus’,{

inserted:(el)=>{

el.focus()

}

})

inserted 是钩子函数，在绑定元素插入父节点时执行。

在 vue3 中，vue 实例通过createApp 创建，所以全局自定义指令的挂载方式也改变了， directive 被挂载到 app上。

实例2：Vue3 全局自定义指令

//全局自定义指令

app.directive(‘focus’,{

mounted(el){

el.focus()

}

})

//组件使用

1.2、局部自定义指令

在组件内部，使用 directives 引入的叫做局部自定义指令。Vue2 和 Vue3 的自定义指令引入是一模一样的。

实例3：局部自定义指令

二、自定义指令中的生命周期钩子函数

---

一个指令定义对象可以提供如下几个钩子函数（都是可选的，根据需要引入）

• created ：绑定元素属性或事件监听器被应用之前调用。该指令需要附加需要在普通的 v-on 事件监听器前调用的事件监听器时，这很有用。

• beforeMounted ：当指令第一次绑定到元素并且在挂载父组件之前执行。

• mounted ：绑定元素的父组件被挂载之后调用。

• beforeUpdate ：在更新包含组件的 VNode 之前调用。

• updated ：在包含组件的 VNode 及其子组件的 VNode 更新后调用。

• beforeUnmounted ：在卸载绑定元素的父组件之前调用

• unmounted ：当指令与元素解除绑定且父组件已卸载时，只调用一次。

实例3：测试指令内生命周期函数执行

<button @click=“changStatus”>{{show?‘隐藏’:‘显示’}}

//局部自定义指令

const autoFocus = {

focus:{

created(){

console.log(‘created’);

},

beforeMount(){

console.log(‘beforeMount’);

},

mounted(el){

console.log(‘mounted’);

},

beforeUpdated(){

console.log(‘beforeUpdated’)

},

updated(){

console.log(‘updated’);

},

beforeUnmount(){

console.log(‘beforeUnmount’);

},

unmounted(){

console.log(‘unmounted’);

}

},

}

import { ref } from ‘vue’

export default {

directives:autoFocus,

setup(){

const show = ref(true)

return {

show,

changStatus(){

show.value = !show.value

}

}

}

}

通过点击按钮，我们发现创建 input 元素的时候，会触发 created、beforeMount 和 mounted 三个钩子函数。

隐藏 input 元素的时候，会触发 beforeUnmount 和 unmounted 。

然而我们添加的 beforeUpdate 和 updated 函数并没有执行。

此时我们把 input 元素上的 v-if 修改成 v-show 就会执行上述两个方法了，具体的执行情况自行验证下。

从 vue2 升级到 vue3 ，自定义指令的生命周期钩子函数发生了改变，具体变化如下：

• bind 函数被替换成了beforeMounted。

• update 被移除。

• componentUpdated 被替换成了updated。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

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

…(img-lu1eCkgI-1712004682146)]

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

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