2023-03-20 【总结：常见性能优化（一）】对于vue项目你有哪些常见的优化的方案?—— 在Vue代码层面对Vue项目进行优化

零.前言

Vue框架通过数据双向绑定和虚拟DOM技术,可以让开发者无需考虑大量的DOM操作,
但是Vue项目中仍可以对项目进行首屏优化,webpack编译配置优化等问题
大致可以分为三个层面的优化:

• vue代码层面
• wrbpack配置层面
• 基础的web技术层面

一.在Vue代码层面对Vue项目进行优化

1.分场景使用v-if和v-show

面试题:v-if和v-show的区别?

两者都可以控制DOM元素的显示和隐藏,
区别是v-if是通过创建和销毁节点来控制渲染的,而v-show是在css层面控制节点的display值来使节点显示和隐藏的

使用场景

v-if适用于运行时很少改变条件,不需要频繁切换条件的场景
v-show适用于需要频繁切换条件的场景

2.分场景使用computed和watch

面试题:computed和watch的区别?

computed是计算属性,依赖其他的属性值,
computed的值有缓存.只有它依赖的属性值发生改变时,下一次获取computed的值才会重新计算其值

而watch是监听属性,每当监听的数据变化时都会执行回调进行后续操作
watch没有缓存

使用场景

computed适用于需要进行数值计算且依赖于其他数据的场景,这样可以利用其缓存特性,避免每次获取值时都要重新计算
watch适用于需要在数据变化时执行异步或者开销较大的操作的场景,watch可以做到computed无法做到的操作,即执行异步操作,并在获取异步操作的结果前设置中间态,限制我们执行该操作的频率

3.为v-for添加数组的item作为key值,并避免同时使用v-if

面试题:v-for为什么要添加key?

v-for中添加key可以让每个循环出来的DOM添加唯一标识,从而高效地更新虚拟DOM,
可以快速找到节点,减少渲染次数,提高渲染性能

面试题:v-for为什么要使用数组的item作为key而不是index?

1.不加key的时候,每次操作DOM都会重新销毁和生成新DOM,这样会使性能消耗极大,
2.而加的key如果不是唯一标识(比如使用的是index而不是item),

则会导致内部复用错误的组件和DOM
3.添加正确的key后,由于vue的源码是内部数据驱动,通过改变数据来改变视图,
加上key之后,更容易定位到相应的元素,避免遍历DOM造成的性能消耗

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

面试题:v-for和v-if的优先级哪个更高?

v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，
尤其是:当仅仅需要渲染很小一部分DOM时，应替换成 computed 属性。
因此,v-for 遍历的时候应避免同时使用 v-if

4.仅仅用于数据展示的组件不让其被vue数据劫持

面试题:vue实现双向数据绑定的原理是什么?

Vue通过数据劫持,结合"订阅者-发布者"模式,通过Object.defineProperty()劫持vue实例的getter和setter,
当数据发生变动时,发布消息给订阅者,触发相应的监听回调来渲染视图

修改数组或者对象但视图层没有同步更新的原因是什么?以及解决方法是什么?

原因

vue实例被创建后,无法检测到对象属性的新增和删除,
只能追踪到数据是否被修改,因为Object.defineProperty()只能劫持对象的属性

解决方法

• vue2提供给所有示例一个全局方法this.$forceUpdate(),可以让算法重新计算和更新页面
• vue3实现数据双向绑定是通过 Proxy

优化:通过Object.freeze()来冻结对象,以vue劫持数据,减少组件初始化的时间

组件仅仅用于数据展示,而不需要进行任何改变时,
不需让vue劫持数据,这样可以明显减少组件初始化的时间
方法:Object.freeze冻结一个对象,冻结后的对象将无法被修改

export default {
   
  data