Web前端最全【前端性能优化】vue性能优化(2)，2024年最新面试指导书籍

最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

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

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

2. 不要在模板里面写过多的表达式与判断 v-if="isShow && isAdmin && (a || b)" ，这种表达式虽说可以识别，但是不是长久之计，当看着不舒服时，适当的写到 methods 和 computed 里面封装成一个方法，这样的好处是方便我们在多处判断相同的表达式，其他权限相同的元素再判断展示的时候调用同一个方法即可。

3. 循环调用子组件时添加 key,key 可以唯一标识一个循环个体，可以使用例如 item.id 作为 key，假如数组数据是这样的 [‘a’ , ‘b’, ‘c’, ‘a’],使用 :key="item" 显然没有意义，更好的办法就是在循环的时候 (item, index) in arr ，然后 :key="index" 来确保 key 的唯一性。当state更新时，新的状态值和旧的状态值对比，较快地定位到diff。

二、style

---

1、单独模块的样式要加上<style scoped> ，目的就是害怕其他开发人员对文件的样式有冲突导致样式混乱的问题。

2、尽量少用浮动和定位，能用flex的解决就用flex解决

三、script

---

1. methods 中每一个方法一定要简单，只做一件事，尽量封装可复用的简短的方法，参数不易过多。如果十分依赖 lodash 开发，method 看着会简洁许多，代价就是整体的 bundle 体积会大，假如项目仅仅用到小部分方法可以局部引入 loadsh，不想用 lodash 的话可以自己封装一个 util.js 文件

2. watch 和 computed 用哪个的问题看官网的例子，计算属性主要是做一层 filter 转换，切忌加一些调用方法进去，watch 的作用就是监听数据变化去改变数据或触发事件如 this.$store.dispatch('update', { ... })

3.减少watch的数据。当组件某个数据变更后需要对应的state进行变更，就需要对另外的组件进行state进行变更。可以使用watch监听相应的数据变更并绑定事件。当watch的数据比较小，性能消耗不明显。当数据变大，系统会出现卡顿，所以减少watch的数据。其它不同的组件的state双向绑定，可以采用事件中央总线或者vuex进行数据的变更操作。

四、组件优化

---

在项目开发过程之中，如果把所有的组件的布局写在一个组件中，当数据变更时，由于组件代码比较庞大，vue 的数据驱动视图更新会比较慢，造成渲染过慢，也会造成比较差的体验效果。所以要把组件细分，比如一个组件，可以把整个组件细分成轮播组件、列表组件、分页组件等。

五、组件的异步加载（按需加载组件）

---

在平时的demo中，可能不会遇见这个需求。当页面很多，组件很多的时候，SPA页面在首次加载的时候，就会变的很慢。这是因为vue首次加载的时候把可能一开始看不见的组件也一次加载了，这个时候就需要对页面进行优化，就需要异步组件了。

六、打包优化

---

解决方法很简单，打包 vender 时不打包 vue、vuex、vue-router、axios 等，换用国内的bootcdn直接引入到根目录的 index.html 中。

例如：

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

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