1.使用key
对于通过循环生成的列表，应给每个列表项一个稳定且唯一的key，这有利于在列表变动时，尽量少的删除、新增、改动元素
2.使用冻结的对象
冻结的对象不会被响应化， 这一点常常用在对象比较庞大，或者是一个很长的数组，但是里面的数据又不会改变，可以放弃让vue对他的数据进行响应化的处理，从而提高加载速度。
this.freezeDatas = Object.freeze(this.getDatas());
通过上面的代码获取的freezeDatas 就不会响应化处理。
3.使用函数式组件
没有this,没有生命周期钩子函数。 用不到生命周期钩子函数，也没有自己的data，只是从父附件传过来个数据显示一下，我们就可以用函数式组件。
<template functional>
<h1>NormalComp: {{ props.count }}</h1>
</template>
<script>
export default {
functional: true,
props: {
count: Number,
},
};
</script>
<style></style>
注意点有：
<template>这里需要加functionalexport default { functional: true,这里需要加functional: true- 使用props的时候需要前面加
{{ props.count }}
参见函数式组件
4.使用计算属性
如果模板中某个数据会使用多次，并且该数据是通过计算得到的，使用计算属性以缓存它们
5.非实时绑定的表单项
当使用v-model绑定一个表单项时，当用户改变表单项的状态时，也会随之改变数据，从而导致vue发生重渲染（rerender），这会带来一些性能的开销。
特别是当用户改变表单项时，页面有一些动画正在进行中，由于JS执行线程和浏览器渲染线程是互斥的，最终会导致动画出现卡顿。
我们可以通过使用lazy或不使用v-model的方式解决该问题，但要注意，这样可能会导致在某一个时间段内数据和表单项的值是不一致的。
详细可以看这篇文章 juejin.cn/post/728266…
6.保持对象引用稳定
在绝大部分情况下，vue触发rerender的时机是其依赖的数据发生变化
若数据没有发生变化，哪怕给数据重新赋值了，vue也是不会做出任何处理的
下面是vue判断数据没有变化的源码
// value 为旧值， newVal 为新值
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
因此，如果需要，只要能保证组件的依赖数据不发生变化，组件就不会重新渲染。
对于原始数据类型，保持其值不变即可
对于对象类型，保持其引用不变即可
从另一方面来说，由于可以通过保持属性引用稳定来避免子组件的重渲染，那么我们应该细分组件来尽量避免多余的渲染
7.使用v-show替代v-if
对于频繁切换显示状态的元素，使用v-show可以保证虚拟dom树的稳定，避免频繁的新增和删除元素，特别是对于那些内部包含大量dom元素的节点，这一点极其重要
关键字：频繁切换显示状态、内部包含大量dom元素
8.使用延迟装载（defer）
首页白屏时间主要受到两个因素的影响：
-
打包体积过大
巨型包需要消耗大量的传输时间，导致JS传输完成前页面只有一个
<div>，没有可显示的内容 -
需要立即渲染的内容太多
JS传输完成后，浏览器开始执行JS构造页面。
但可能一开始要渲染的组件太多，不仅JS执行的时间很长，而且执行完后浏览器要渲染的元素过多，从而导致页面白屏
打包体积过大需要自行优化打包体积，本节不予讨论
本节仅讨论渲染内容太多的问题。
一个可行的办法就是延迟装载组件，让组件按照指定的先后顺序依次一个一个渲染出来
延迟装载是一个思路，本质上就是利用
requestAnimationFrame事件分批渲染内容，它的具体实现多种多样
export default function(maxFrameCount) {
return {
data() {
return {
frameCount: 0,
};
},
mounted() {
const refreshFrameCount = () => {
requestAnimationFrame(() => {
this.frameCount++;
if (this.frameCount < maxFrameCount) {
refreshFrameCount();
}
});
};
refreshFrameCount();
},
methods: {
defer(showInFrameCount) {
return this.frameCount >= showInFrameCount;
},
},
};
}
<template>
<div class="container">
<div class="block" v-for="n in 21" v-if="defer(n)">
<heavy-comp></heavy-comp>
</div>
</div>
</template>
<script>
import HeavyComp from "./components/HeavyComp.vue";
import defer from "./mixin/defer";
export default {
mixins: [defer(21)],
components: { HeavyComp },
};
</script>
<style scoped>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1em;
}
.block {
border: 3px solid #f40;
}
</style>
9.使用keep-alive
面试题：请阐述keep-alive组件的作用和原理
keep-alive组件是vue的内置组件，用于缓存内部组件实例。这样做的目的在于，keep-alive内部的组件切回时，不用重新创建组件实例，而直接使用缓存中的实例，一方面能够避免创建组件带来的开销，另一方面可以保留组件的状态。
keep-alive具有include和exclude属性，通过它们可以控制哪些组件进入缓存。另外它还提供了max属性，通过它可以设置最大缓存数，当缓存的实例超过该数时，vue会移除最久没有使用的组件缓存。
受keep-alive的影响，其内部所有嵌套的组件都具有两个生命周期钩子函数，分别是activated和deactivated，它们分别在组件激活和失活时触发。第一次activated触发是在mounted之后
在具体的实现上，keep-alive在内部维护了一个key数组和一个缓存对象
// keep-alive 内部的声明周期函数
created () {
this.cache = Object.create(null)
this.keys = []
}
key数组记录目前缓存的组件key值，如果组件没有指定key值，则会为其自动生成一个唯一的key值
cache对象以key值为键，vnode为值，用于缓存组件对应的虚拟DOM
在keep-alive的渲染函数中，其基本逻辑是判断当前渲染的vnode是否有对应的缓存，如果有，从缓存中读取到对应的组件实例；如果没有则将其缓存。
当缓存数量超过max数值时，keep-alive会移除掉key数组的第一个元素
render(){
const slot = this.$slots.default; // 获取默认插槽
const vnode = getFirstComponentChild(slot); // 得到插槽中的第一个组件的vnode
const name = getComponentName(vnode.componentOptions); //获取组件名字
const { cache, keys } = this; // 获取当前的缓存对象和key数组
const key = ...; // 获取组件的key值，若没有，会按照规则自动生成
if (cache[key]) {
// 有缓存
// 重用组件实例
vnode.componentInstance = cache[key].componentInstance
remove(keys, key); // 删除key
// 将key加入到数组末尾，这样是为了保证最近使用的组件在数组中靠后，反之靠前
keys.push(key);
} else {
// 无缓存，进行缓存
cache[key] = vnode
keys.push(key)
if (this.max && keys.length > parseInt(this.max)) {
// 超过最大缓存数量，移除第一个key对应的缓存
pruneCacheEntry(cache, keys[0], keys, this._vnode)
}
}
return vnode;
}
具体使用
<keep-alive>
<component :is="comps[curIndex]"></component>
</keep-alive>
注意：component 是一个动态的组件， :is里面放的可以是组件名称的字符串，元素名称的字符串。也可以是组件对象。
