Vue-性能优化

优化分打包体积优化和运行时优化，以下都是运行时优化。

使用key

对于通过循环生成的列表，应给每个列表项一个稳定且唯一的key，这有利于在列表变动时，尽量少的删除、新增、改动元素

使用冻结的对象

冻结的对象不会被遍历响应式

<template>
  <div id="app">
    <button @click="loadNormalDatas">load normal datas</button>
    <button @click="loadFrozenDatas">load frozen datas</button>
    <h1>normal datas count: {{ normalDatas.length }}</h1>
<!--    下面加载会更快-->
    <h1>freeze datas count: {{ freezeDatas.length }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      normalDatas: [], // 普通数组
      freezeDatas: [], // 将来会被冻结的数组
    };
  },
  methods: {
    // 加载普通数据
    loadNormalDatas() {
      this.normalDatas = this.getDatas();
      console.log('normalDatas', this.normalDatas);
    },
    // 加载冻结数据，冻结数据不能更改
    loadFrozenDatas() {
      this.freezeDatas = Object.freeze(this.getDatas());//模拟从服务器上获取的数据，不需要改变，只是获取
      console.log('freezeDatas', this.freezeDatas);
    },
    getDatas() {
      const result = [];
      for (var i = 0; i < 100000; i++) {
        result.push({
          id: i,
          name: `name${i}`,
          address: {
            city: `city${i}`,
            province: `province${i}`,
          },
        });
      }
      return result;
    },
  },
};
</script>

<style>
#app {
  text-align: center;
}
</style>

使用函数式组件

参见函数式组件

显示一篇文章要创建一大批组件，每个组件会调用new Vue，会消耗时间，消耗内存空间

而函数式组件不能有生命周期函数，也不能有data，它的作用就是帮你形成虚拟dom，形成后直接扔给父组件

FunctionalComp.vue

<template functional>
  <!--  函数组件前面必须加props，从属性中读取-->
  <h1>NormalComp: {{ props.count }}</h1>
</template>
<script>
export default {
  functional: true,
  props: {
    count: Number,
  },
};
</script>
<style></style>

App.vue

<template>
  <div id="app">
    <button @click="functionalCount = 10000">生成10000个函数组件</button>

    <div class="container">
      <div class="item">
        <FunctionalComp v-for="n in functionalCount" :key="n" :count="n" ></FunctionalComp>
      </div>
    </div>
  </div>
</template>

<script>
import FunctionalComp from "./components/FunctionalComp";
export default {
  components: {
    FunctionalComp,
  },
  data() {
    return {
      functionalCount: 0,
    };
  },
  mounted() {
    window.vm = this;
  },
};
</script>

<style>
#app {
  text-align: center;
}
.container {
  width: 90%;
  display: flex;
  margin: 0 auto;
}
.item {
  padding: 30px;
  border: 1px solid #ccc;
  margin: 1em;
  flex: 1 1 auto;
}
</style>

普通组件

但是当我们控制台查看vm实例下的_vnode虚拟结点，点开children

选择children

组件实例在componentInstance，是通过new Vue创建出来的，在它下面是没有结点的

h1是在组件实例_vnode下，组件里面的元素交给componentInstance

函数组件

直接把h1交给父组件，他的作用就是直接生成模板

红色剪头指向是内存占用，前面是普通组件，后面是函数组件

使用计算属性

如果模板中某个数据会使用多次，并且该数据是通过计算得到的，使用计算属性以缓存它们
计算属性和方法有什么区别？
计算属性有缓存，方法没缓存。×这个回答不够
计算属性和watcher密切相关，这里不展开了，以后再补充

非实时绑定的表单项

v-model一般用在表单元素里，跟虚拟dom有关系，也不展开，以后补充
当使用v-model绑定一个表单项时，当用户改变表单项的状态时，也会随之改变数据，从而导致vue发生重渲染（rerender）执行js，这会带来一些性能的开销。

特别是当用户改变表单项时，页面有一些动画正在进行中，由于JS执行线程和浏览器渲染线程是互斥的，最终会导致动画出现卡顿。

我们可以通过使用lazy或不使用v-model的方式解决该问题，v-model延迟绑定，当文本失去焦点时候绑定，但要注意，这样可能会导致在某一个时间段内数据和表单项的值是不一致的。

保持对象引用稳定

在绝大部分情况下，vue触发rerender的时机是其依赖的数据发生变化

若数据没有发生变化，哪怕给数据重新赋值了，vue也是不会做出任何处理的

下面是vue判断数据没有变化的源码

// value 为旧值， newVal 为新值
if (newVal === value || (newVal !== newVal && value !== value)) {//NaN
  return
}

因此，如果需要，只要能保证组件的依赖数据不发生变化，组件就不会重新渲染。

对于原始数据类型，保持其值不变即可

对于对象类型，保持其引用不变即可

从另一方面来说，由于可以通过保持属性引用稳定来避免子组件的重渲染，那么我们应该细分组件来尽量避免多余的渲染
每一次从服务器获取的数据都是全新的对象，地址值不一样的

使用v-show替代v-if

对于频繁切换显示状态的元素，使用v-show可以保证虚拟dom树的稳定，避免频繁的新增和删除元素，特别是对于那些内部包含大量dom元素的节点，这一点极其重要

关键字：频繁切换显示状态、内部包含大量dom元素

使用延迟装载（defer）

首页白屏时间主要受到两个因素的影响：

• 打包体积过大

  巨型包需要消耗大量的传输时间，导致JS传输完成前页面只有一个<div>，没有可显示的内容

• 需要立即渲染的内容太多

  JS传输完成后，浏览器开始执行JS构造页面。

  但可能一开始要渲染的组件太多，不仅JS执行的时间很长，而且执行完后浏览器要渲染的元素过多，从而导致页面白屏

打包体积过大需要自行优化打包体积，本节不予讨论

本节仅讨论渲染内容太多的问题。

一个可行的办法就是延迟装载组件，让组件按照指定的先后顺序依次一个一个渲染出来

延迟装载是一个思路，本质上就是利用requestAnimationFrame事件分批渲染内容，它的具体实现多种多样

使用keep-alive

切换组件显示时候（v-if）保留组件实例，避免重新创建组件
面试常考，下次补充

长列表优化

比如刷微博，刷了1w条导致非常卡