vue - 常见的性能优化

vue使用中常见的性能优化

---

1， v-for 遍历避免同时使用 v-if

在 Vue2 中 v-for 优先级更高，所以编译过程中会把列表元素全部遍历生成虚拟 DOM，再来通过 v-if 判断符合条件的才渲染，就会有多余的逻辑判断和造成性能的浪费，因为我们希望的是不符合条件的虚拟 DOM都不要生成；

1，为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，可以将 users 替换为一个计算属性或者方法 (比如 activeUsers)，让其返回过滤后的列表；

<ul><liv-for="user in activeUsers":key="user.id">{{ user.name }}</li>
</ul>methods:{// 方法activeUsers(){//在这里面处理需要显示的数据  然后返回筛选过的列表}
}

2，为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将 v-if 移动至容器元素上 (比如 ul、ol)。

<ul v-if="shouldShowUsers"><liv-for="user in users":key="user.id">{{ user.name }}</li>
</ul>

在 Vue3 中 v-if 的优先级更高，就意味着当判断条件是 v-for 遍历的列表中的属性的话，v-if 是拿不到的；

注意：永远不要把 v-if 和 v-for 同时用在同一个元素上。

2， 如果需要使用v-for给每项元素绑定事件时 可以使用事件代理**

事件代理的本质就是利用事件冒泡到父元素的特性。这样就可以不用在循环的节点上每一个都加事件了；如下：

在父元素ul上面添加点击事件，如过需要传参的话 只需要添加自定义属性即可，比如下面的 id属性

  <!--  使用事件委托进行处理和传参 添加自定义属性id --><ul class="weekdays" @click="debounce($event)"><li v-for="(item, index) in dayList" :key="index" :id="index" >{{ item.day }}</li></ul>

	// 事件委托处理debounce(event) {if (event.target && event.target.nodeName == "LI") {// 现在就可以拿到当前的节点 所以就能拿到里面的属性和数据console.log("我点击的是：", event.target);}},

事件代理好处有2 个
1，将事件处理程序代理到父节点，减少内存占用率；
2，动态生成子节点时能自动绑定事件处理程序到父节点；

3， 一些数据不做响应式

一些数据不做响应式 比如会员列表、商品列表之类的，只是纯粹的数据展示，不会有任何动态改变的场景下，就不需要对数据做响应化处理，可以大大提升渲染速度;

可以使用 Object.freeze() 方法冻结一个对象，该方法冻结的对象不能被修改；即不能向这个对象添加新属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值，以及该对象的原型也不能被修改；

export default {data: () => ({userList: []}),async created() {const users = await axios.get("/api/users");this.userList = Object.freeze(users);}
};

Vue2 的响应式源码地址：src/core/observer/index.js - 144行 是这样的:

export function defineReactive (...){// getOwnPropertyDescriptor 返回指定对象上一个自有属性对应的属性描述符// 也就是直接赋予该对象的属性，不需要从原型链上进行查找的属性const property = Object.getOwnPropertyDescriptor(obj, key)判断configurable` 为 `false`不做处理if (property && property.configurable === false) {return}...
}

可以看到一开始就判断 configurable 为 false 的直接返回不做响应式处理；

configurable` 为 `false` 表示这个属性是不能被修改的，而冻结的对象的 `configurable` 就是为 `false

这是vue正常定义在data里面的数据，会自动把下面的所有属性都添加get和set属性，有多少就添加多少：

开始冻结对象：

freList是请求后端的列表数据；

  created() {this.dayList = Object.freeze(freList)console.log("daylist:",this.dayList);},

可以看出已经没有get和set属性了，但同时这些数据也不具备响应式了；

4，一些页面采用keep-alive缓存组件

比如在表单输入页面进入下一步后，再返回上一步到表单页时要保留表单输入的内容、比如在列表页>详情页>列表页，这样来回跳转的场景等；

基础使用：

	如果需要缓存整个项目，则如下设置(直接包裹根router-view即可)：<keep-alive><router-view> </router-view></keep-alive>缓存部分页面或者组件，使用route.meta属性<keep-alive><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive"></router-view>注：<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。<keep-alive><component :is="view"></component></keep-alive> 

注意： 配置了keepAlive的页面，在再次进入时不会重新渲染（第一次进来时会触发所有钩子函数），该页面内的组件同理不会再次渲染。

而这可能会导致该组件内的相关操作（那些每次都需要重新渲染页面的操作：如父子组件间的传值）不再生效。 这一点可能会导致一些莫名其妙而又无从查证的bug；

vue2.1.0 新增了include，exclude俩个属性，允许组件有条件的缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。

    <!-- 逗号分隔字符串 --><keep-alive include="a,b"><component :is="view"></component></keep-alive><!-- 正则表达式 (需要 `v-bind`绑定) --><keep-alive :include="/a|b/"><component :is="view"></component></keep-alive><!-- 数组 (需要 `v-bind`绑定) --><keep-alive :include="['a', 'b']"><component :is="view"></component></keep-alive>

注：匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

动态判断，使用v-bind:include

<keep-alive :include="includedComponents"><router-view></router-view>
</keep-alive>includedComponents动态设置即可  

使用beforeRouteLeave或者afterEach中进行拦截处理

如在项目在Category组件中的设置：
beforeRouteLeave(to,from,next){if(to.name=='DemoIndex'){if(!from.meta.keepAlive){from.meta.keepAlive=true}next()}else{from.meta.keepAlive=falseto.meta.keepAlive=falsenext()}
},
在beforeRouteLeave中to.name根据具体的路由进行动态缓存设置

使用keepAlive后生命周期变化（重要）：

首次进入缓存页面：beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存页面：beforeRouteEnter --> activated --> deactivated

注：
1、这里的activated非常有用，因为页面被缓存时，created,mounted等生命周期均失效，你若想进行一些操作，那么可以在activated内完成(下面会举个栗子：列表页回到上次浏览位置)
2、activated keep-alive组件激活时调用，该钩子在服务器端渲染期间不被调用。
3、deactivated keep-alive组件停用时调用，该钩子在服务端渲染期间不被调用。

5，第三方UI库按需导入

比如 vantUi， element-ui库的按需引入；见这篇文章

6，列表数据的懒加载 上滑加载分页数据

列表数据的懒加载滚动条上划到底时开始请求下一页的数据，尽量配合防抖函数使用，防止一瞬间请求的次数太多。

如下代码：

这边我用的是vue3写的，vue2只是获取节点的方式不一样，其他都一样的；

onMounted(() => {// 获取滚动容器的节点let containerEle = showContentEl.value;if (!containerEle) return;// 监听滚动条containerEle.addEventListener("scroll", function () {const clientHeight = containerEle.clientHeight;const scrollTop = parseInt(containerEle.scrollTop);const scrollHeight = containerEle.scrollHeight;// 判断是否滚动条是否滚动到底  （-1是为了控制误差）if (clientHeight + scrollTop >= scrollHeight - 1) {// 开始防抖请求数据debounceLoadMaterialList();}});
});<template><div class="container"><div class="list">展示的列表数据</div></div>
</template>

设置接口防抖：

import * as _ from "lodash";
// 设置接口防抖
const debounceLoadMaterialList = _.debounce(loadMaterialList, 500);

7，变量本地化

简单说就是把会多次引用的变量保存起来，因为每次访问 this.xx 的时候，由于是响应式对象，所以每次都会触发 getter，然后执行依赖收集的相关代码，如果使用变量次数越多，性能自然就越差;

从需求上说在一个函数里一个变量执行一次依赖收集就够了，可是很多人习惯性的在项目中大量写 this.xx，而忽略了 this.xx 背后做的事，就会导致性能问题了;

比如下面vue2的例子：

<template><div :style="{ opacity: number / 100 }"> {{ result }}</div>
</template>
<script>
import { someThing } from '@/utils'
export default {props: ['number'],computed: {base () { return 100 },result () {let base = this.base, number = this.number // 保存起来  -- 变量本地化for (let i = 0; i < 1000; i++) {number += someThing(base) // 避免频繁引用 this.xx}return number}}
}
</script>

8，事件的销毁

Vue 组件销毁时，会自动解绑它的全部指令及事件监听器，但是仅限于组件本身的事件;

而对于定时器、 addEventListener 注册的监听器等，就需要在组件销毁的生命周期钩子中手动销毁或解绑，以避免内存泄露；

<script>
export default {created() {this.timer = setInterval(this.refresh, 2000)addEventListener('touchmove', this.touchmove, false)},beforeDestroy() {clearInterval(this.timer)this.timer = nullremoveEventListener('touchmove', this.touchmove, false)}
}
</script>