总结:
-
函数式编程其实是一种编程思想,它追求更细的粒度,将应用拆分成一组组极小的单元函数,组合调用操作数据流;
-
它提倡着 纯函数 / 函数复合 / 数据不可变, 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用;
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Tips:
其实我们很难也不需要在面试过程中去完美地阐述出整套思想,这里也只是浅尝辄止,一些个人理解而已。博主也是初级小菜鸟,停留在表面而已,只求对大家能有所帮助,轻喷🤣;
我个人觉得: 这些编程范式之间,其实并不矛盾,各有各的 优劣势。
理解和学习它们的理念与优势,合理地 设计融合,将优秀的软件编程思想用于提升我们应用;
所有设计思想,最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用,开发更为高效和安全;
const forElementUI = require(‘webpack-theme-color-replacer/forElementUI’)
const ThemeColorReplacer = require(‘webpack-theme-color-replacer’)
module.exports = {
…
plugins: [
//生成仅包含颜色的替换样式(主题色等)
new ThemeColorReplacer({
fileName: ‘css/theme-colors.[contenthash:8].css’,
matchColors: [
…forElementUI.getElementUISeries(appConfig.themeColor), //element-ui主色系列
‘#0cdd3a’, //自定义颜色
‘#c655dd’,
],
changeSelector: forElementUI.changeSelector,
isJsUgly: config.isBuild,
// resolveCss(resultCss) { // optional. Resolve result css code as you wish.
// return resultCss + youCssCode
// }
})
],
}
4. 页面配置,配置内容如下:
<el-button @click=“reset” size=“small” style=“float: right;”>Reset
import changeColor from ‘./changeColor.vue’
export default {
props: {},
data() {
return {};
},
methods: {
reset() {
localStorage.removeItem(‘theme_color’)
location.reload()
}
},
computed: {},
components: { changeColor, footCode }
}
### 四、优化
提醒:若需要进行颜色替换的页面较多,可考虑将颜色替换组件设置为全局自定义组件。实现方式如下:
1. 在`main.js`中全局注册到`vue`中
import MyBread from ‘@/components/common/MyBread.vue’
Vue.component(“MyBread”, MyBread);//全局自定义组件
2. 在需要的组件中可以直接使用,注意需要父子传值
**注:在进行主体色变换时,若需要替换的主体色较多时,在初始化新的主体色数组时,应新增相应数量的色彩元素。否则,匹配的主体色不会生效。**
效果:
<http://test.hz300.com/webpack4/themeColor.html>
* [插件源码](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
* [完整项目源码](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
### 五、拓展阅读
* 《[Vue进阶(幺零八):Vue npm run build 错误 (node:7852) UnhandledPromiseRejectionWarning: CssSyntaxError:xxxx.](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)》
## Vue 面试题
1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程?
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用?
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用?
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么?
14.说一下 Vue 和 React 的认识,做一个简单的对比
15.Vue 的 nextTick 的原理是什么?
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解?
19.vue-cli 替我们做了哪些工作?
![](https://img-blog.csdnimg.cn/img_convert/ea3e87bc35cb14f7ecb60139d3d02fec.webp?x-oss-process=image/format,png)
**[如果你觉得对你有帮助,可以戳这里获取:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
715839800169)]
**[如果你觉得对你有帮助,可以戳这里获取:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**