vue3的自定义指令怎么用vue3的全局自定义指令怎么写。自定义指令的钩子函数。简单易懂(1)

总结:

• 函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；

• 它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；

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

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；

我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。

理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；

所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；

• inserted：当对应元素被插入到 DOM 的父元素时触发。

• update：当元素更新时，这个钩子会被触发（此时元素的后代元素还没有触发更新）。

• componentUpdated：当整个组件（包括子组件）完成更新后，这个钩子触发。

• unbind：当指令被从元素上移除时，这个钩子会被触发。也只触发一次。

二、在Vue3 中，官方为了更有助于代码的可读性和风格统一，把自定义指令的钩子名称改的更像是组件生命周期，尽管他们是两回事

• bind => beforeMount

• inserted => mounted

• beforeUpdate: 新的钩子，会在元素自身更新前触发

• update => 移除！

• componentUpdated => updated

• beforeUnmount: 新的钩子，当元素自身被卸载前触发

• unbind => unmounted

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

指令定义对象可以提供如下几个钩子函数（按需引入）

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

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

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

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

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

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

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

一、注册一个全局的自定义指令，创建一个文件夹 busDirective > index.js

export default {

install(app) {

app.directive(‘color’, { // color 是指令的名字

created(el, binding) { // el 是当前绑定的元素，binding 是一个对象

console.log(binding.value);

el.style.backgroundColor = binding.value // binding.value 就是指令绑定的内容，也是等号里面的值

},

updated(el, binding) {

el.style.backgroundColor = binding.value

},

})

}

}

1、 钩子函数被赋予了以下参数： el：指令所绑定的元素，可以直接操作DOM。 binding：是一个对象，包含该指令的所有信息。 binding 包含的属性具体的分别为：

2、 arg 自定义指令的参数名。 value 自定义指令绑定的值。 oldValue 指令绑定的前一个值。 dir 被执行的钩子函数 modifiers：一个包含修饰符的对象。

二、在 min.js 中使用

import {

createApp

} from ‘vue’

import App from ‘./App.vue’

import router from ‘./router’

import store from ‘./store’

• import directive from ‘./busDirective/index’

createApp(App).use(store).use(router).use(directive).mount(‘#app’) // use使用

三、然后搭配 vuex 的state v-color 就可以改指定元素的颜色

全局指令 可以配合全局state数据来灵活使用

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

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

新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

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

[外链图片转存中…(img-eLCKGXJn-1715832733515)]