【Vue.js性能优化】-优快云博客

本文链接：https://blog.youkuaiyun.com/aaajavac/article/details/122789501

引言

Vue框架通过数据双向绑定和虚拟DOM技术，帮我们处理了前端开发中最脏最累的DOM操作部分，我们不再需要去考虑如何操作DOM以及如何最高效地操作DOM，但是我们仍然需要去关注Vue在跨平台项目性能方面的优化，使项目具有更高效的性能、更好的用户体验。

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

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

我们在使用的使用经常会使用index(即数组的下标)来作为key，但其实这是不推荐的一种使用方法。

let list = [
    {
        id: 1,
        name: 'test1',
    },
    {
        id: 2,
        name: 'test2',
    },
    {
        id: 3,
        name: 'test3',
    },
]

<div v-for="(item, index) in list" :key="index" >{{item.name}}</div>

在最后一条数据后再加一条数据：


var list = [
    {
        id: 1,
        name: 'test1',
    },
    {
        id: 2,
        name: 'test2',
    },
    {
        id: 3,
        name: 'test3',
    },
    {
        id: 4,
        name: '我是在最后添加的一条数据',
    },
]

此时前三条数据直接复用之前的，新渲染最后一条数据，此时用index作为key，没有任何问题。

在中间插入一条数据：


var list = [
    {
        id: 1,
        name: 'test1',
    },
    {
        id: 4,
        name: '我是插队的那条数据',
    },
    {
        id: 2,
        name: 'test2',
    },
    {
        id: 3,
        name: 'test3',
    },
]

此时更新渲染数据，通过index定义的key去进行前后数据的对比，发现：


之前的数据                         之后的数据

key: 0  index: 0 name: test1     key: 0  index: 0 name: test1

key: 1  index: 1 name: test2     key: 1  index: 1 name: 我是插队的那条数据

key: 2  index: 2 name: test3     key: 2  index: 2 name: test2

                                 key: 3  index: 3 name: test3

通过上面清晰的对比，发现除了第一个数据可以复用之前的之外，另外三条数据都需要重新渲染。

是不是很惊奇，我明明只是插入了一条数据，怎么三条数据都要重新渲染？而我想要的只是新增的那一条数据新渲染出来就行了。

最好的办法是使用数组中不会变化的那一项作为key值，对应到项目中,即每条数据都有一个唯一的id，来标识这条数据的唯一性；使用id作为key值，我们再来对比一下向中间插入一条数据，此时会怎么去渲染。

之前的数据                               之后的数据

key: 1  id: 1 index: 0 name: test1     key: 1  id: 1 index: 0  name: test1

key: 2  id: 2 index: 1 name: test2     key: 4  id: 4 index: 1  name: 我是插队的那条数据

key: 3  id: 3 index: 2 name: test3     key: 2  id: 2 index: 2  name: test2

                                       key: 3  id: 3 index: 3  name: test3

现在对比发现只有一条数据变化了，就是id为4的那条数据，因此只要新渲染这一条数据就可以了，其他都是就复用之前的。

总结：所以一句话，key的作用主要是为了高效的更新虚拟DOM。另外Vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让Vue可以区分它们，否则Vue只会替换其内部属性而不会触发过渡效果。

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

二、长列表性能优化

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

export default {
  data: () => ({
    users: {}
  }),

  async created() {
    const users = await axios.get("/api/users");
    this.users = Object.freeze(users);
  }
};