2024年Web前端最全Vue进阶（二十七）：Vuex 之 getters, mapGetters, ，Web前端面试基础题记不住

React

• 介绍一下react

• React单项数据流

• react生命周期函数和react组件的生命周期

• react和Vue的原理，区别，亮点，作用

• reactJs的组件交流

• 有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢

• 项目里用到了react，为什么要选择react，react有哪些好处

• 怎么获取真正的dom

• 选择react的原因

• react的生命周期函数

• setState之后的流程

• react高阶组件知道吗？

• React的jsx，函数式编程

• react的组件是通过什么去判断是否刷新的

• 如何配置React-Router

• 路由的动态加载模块

• Redux中间件是什么东西，接受几个参数

• redux请求中间件如何处理并发

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

关于`getters`如何使用，可以看一下上面代码注释，这里重点介绍一下`getters`和`computed`的不同，就是上面的第三种用法。


`computed`的一个缺点就是不能传参，假设你要去判断一个数组里是否存在某个值，那你没法将某个值传到`computed`中去；而`getters`则没有这个问题，有些对`ES6`语法使用较为吃力的同学可以看下面的简易版本,来看看findArr究竟做了什么。

let findArr = function(state){
// 返回一个匿名函数
return function(number){
// 如果有相同的则返回n，如果找不到则返回undefined
let ifExit = state.arr.find(function(n){
return n===number
})
if (typeof (ifExit) === ‘undefined’) {
return false
} else {
return true
}
}
}

最后我们在子组件中展示一下效果

{{from}}

{{from2}}

结果如下所示.  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20181223110946964.png)


### 三、mapGetters 辅助函数


关于辅助函数的使用和对象展开符的使用，有需要的童鞋自学下。

{{from}}

{{from2}}

### 四、…mapGetters

{{from}}

{{from2}}

最后再说一句，很多情况下你是用不到`getters`的，请按需使用，不要用`getters`去管理`state`的所有派生状态。如果有多个子组件或者说子页面要用到，才考虑用`getters`。


### 五、拓展阅读


* 《[Vue进阶（幺肆捌）：Vuex辅助函数详解](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)》
* 《[Vue进阶（四十三）：Vuex之Mutations详解](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)》







### 最后

![](https://img-blog.csdnimg.cn/img_convert/62e05deaca97c80b131ec8079edbd4f6.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/18e98d644d0c5491a27180fa83eb125c.webp?x-oss-process=image/format,png)

**资料过多，篇幅有限**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

>自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。



.(img-kGdkM4hM-1715385215496)]

**资料过多，篇幅有限**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

>自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。