总结:
-
函数式编程其实是一种编程思想,它追求更细的粒度,将应用拆分成一组组极小的单元函数,组合调用操作数据流;
-
它提倡着 纯函数 / 函数复合 / 数据不可变, 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用;
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
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 就可以改指定元素的颜色
学习分享,共勉
题外话,毕竟我工作多年,深知技术改革和创新的方向,Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
新的方向,Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-eLCKGXJn-1715832733515)]