vue项目优化

1、路由懒加载

　Vue 是单页面应用，可能会有很多的路由引入 ，这样使用 webpcak 打包后的文件很大，当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。

　如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就要更加高效了。

　这是什么意思呢？

• 首先，我们知道路由中通常会定义很多不同的页面
• 这个页面最后被打包在哪里呢？一般情况下，是放在一个 js 文件中
• 但是，页面这么多放在一个 js 文件中，必然会造成这个页面非常大
• 如果我们一次性从服务器请求下来这个页面，可能需要花费一定的时间，甚至用户的电脑上还出现了短暂空白的情况
• 那么如何避免这种情况呢？使用路由懒加载就可以了

　那么，路由懒加载做了什么？

• 路由懒加载的主要作用就是将路由对应的组件打包成一个个的 js 代码块
• 只有在这个路由被访问到的时候，才加载对应的组件

　在 ES6 中，懒加载的方式：

 

2、图片懒加载

　对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。我们在项目中使用 Vue 的 vue-lazyload 插件。

 

3、keep-alive

　对其包裹的组件进行状态的缓存，使其不被销毁，避免重新渲染。

 

4、区分使用 v-if 和 v-show

　v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

　v-show 就简单得多， 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 display 属性进行切换。

　所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。

 

5、区分 computed 和 watch

　computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；另外，computed 必须要有返回值。

　watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；

应用场景：

• 　当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
• 　当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

 

6、v-for 遍历必须为 item 添加 key，且避免同时使用 v-if

（1）v-for 遍历必须为 item 添加 key

在列表数据进行遍历渲染时，需要为每一项 item 设置唯一 key 值，方便 Vue.js 内部机制精准找到该条列表数据。当 state 更新时，新的状态值和旧的状态值对比，较快地定位到 diff 。

（2）v-for 遍历避免同时使用 v-if

v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性。

 

7、事件的销毁

　Vue 组件销毁时，会自动清理它与其它实例的连接，解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。 如果在 js 内使用 addEventListener 等方式是不会自动销毁的，我们需要在组件销毁时手动移除这些事件的监听，以免造成内存泄露。

 

8、第三方组件的按需引入

　我们在项目中经常会需要引入第三方插件，如element-ui这样的第三方组件库，如果我们直接引入整个插件，会导致项目的体积太大，我们可以借助 babel-plugin-component ，然后可以只引入需要的组件，以达到减小项目体积的目的。

 

9、长列表性能优化

　Vue 会通过 Object.defineProperty 对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要 Vue 来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，那如何禁止 Vue 劫持我们的数据呢？使用 object.freeze(data) 方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。

　如果是大数据长列表，可采用虚拟滚动，只渲染少部分区域的内容，参考[vue]-virtual-scroller、vue-virtual-scroll-list

 

10、子组件分割

　子组件耗时任务，切割为独立子树，独立为自己的渲染，切割为子树 有动态内容，自己管自己的渲染不用管其它地方，多一个watcher自己管自己。

前端代码review

1. 代码质量：代码是否简洁、易读、易维护。是否遵循了一致的编码风格和规范，例如ESLint、Prettier等。
2. 功能实现：代码是否实现了预期的功能，是否有潜在的bug或逻辑错误。
3. 性能优化：代码是否进行了必要的性能优化，例如避免不必要的渲染、使用了合适的数据结构和算法等。
4. 安全性：代码是否存在可能的安全风险，例如XSS攻击、CSRF攻击等。 5. 可测试性：代码是否易于测试，是否有单元测试和集成测试。
6. 可读性：代码是否易于理解，是否有足够的注释和文档。
7. 可复用性：代码是否有高度的模块化和复用性。
8. 兼容性：代码是否兼容不同的浏览器和设备。

vue3的坑

1.父组件异步获取数据传参问题

解决方式：子组件监听或者通过v-if

2.关于通过ref获取组件实例调用子组件方法遇到的一些问题

解决方式：ref还没拿到通过nextTick拿到

webpack vite区别

1.构建速度 Webpack 是一个非常强大的构建工具，但是随着项目规模的增大，Webpack 的构建速度会变得越来越慢，因为它需要将所有模块打包到一个文件中，每次修改都需要重新构建整个项目。而 Vite 采用的是基于浏览器原生 ES 模块的特性，即只会对修改的模块进行重新构建，因此在大型项目中，Vite 的构建速度要比 Webpack 快得多。

2.开发模式 在开发过程中，Webpack 需要将代码打包到一个文件中，然后再在浏览器中进行热更新。这意味着每次修改都需要重新构建整个项目，这会造成较长的等待时间。而 Vite 的开发模式是在浏览器中实时编译和构建代码，这意味着开发者可以在不断开页面的情况下进行实时更新，这样可以大大提高开发效率。

总体来说，Vite具有更快的启动速度、轻量的配置、更好的HMR和SSR支持等特点，适合现代化的框架。但它也存在部分生态缺失的问题。Webpack具有更全面的生态和插件支持，但配置复杂，构建速度较慢。不同场景下可根据需求选择不同的工具。 ————————————————

组件封装应该注意些什么？

1. 单一职责原则：每个组件应该只关注一个特定的功能，不要在一个组件中同时处理多个功能。这样可以使组件的职责清晰，并且使其更容易被复用和维护。

2. 可配置性：封装的组件应该具有一定的可配置性，以便能够适应不同的使用场景。通过使用props属性来接受父组件传递的参数，可以让组件变得更灵活。同时，也应该提供默认值来确保在没有传递参数时组件仍能正常工作。

3. 封装样式：组件应该封装好自己的样式，以避免样式冲突和污染全局样式。可以使用CSS模块化或CSS-in-JS等方式来实现。

4. 事件通信：组件之间的通信是开发中一个重要的问题。可以通过使用事件总线、vuex或自定义事件等方式来实现组件之间的通信。

5. 合理的分层结构：组件的结构应该合理，尽量将功能相似的部分封装成子组件。这样可以提高组件的可维护性和可复用性。

6. 提供良好的文档：封装的组件应该提供清晰明了的文档，包括组件的使用方法、属性和事件等，以方便其他开发者使用和理解。

7. 考虑性能问题：合理使用计算属性、Watchers和生命周期钩子函数，避免不必要的渲染和性能问题