2024年最全vue3 学习笔记 (三)——vue3 自定义指令，字节面试官加微信

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

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

//局部自定义指令

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。

• unbind 被替换成了 unmounted。

• inserted 被移除。

三、自定义指令钩子函数的参数

---

钩子函数被赋予了以下参数：

• el：指令所绑定的元素，可以直接操作DOM。

• binding：是一个对象，包含该指令的所有信息。

binding 包含的属性具体的分别为：

• arg 自定义指令的参数名。

• value 自定义指令绑定的值。

• oldValue 指令绑定的前一个值。

• dir 被执行的钩子函数

• modifiers：一个包含修饰符的对象。

定位

四、自定义指令参数

---

自定义指令的也可以带参数，参数可以是动态的，参数可以根据组件实例数据进行实时更新。

实例4：自定义指令动态参数

定位