常见的性能优化手段

v-if和v-show

v-if和v-show的区别：v-if是针对dom进行的操作，当改变元素的隐藏和显示的时候，需要重新渲染dom结点，造成组件的销毁和重建。而v-show操作的是css属性，类似于display，只会控制某个dom结点是否显示在页面上，但无论显示还是隐藏，dom都会被渲染。

因此如果有频繁的切换的场景时，我们一般用v-show，以便提高速度；当切换得比较少的时候，我们一般用v-if，这样可以减少不必要的渲染开销

watch和computed

computed和watch的区别：他们两个都是用于响应式的数据处理，区别是
1.computed有缓存，如果再次访问返回值的时候，是不会重新触发计算属性的执行的；watch没有缓存，不涉及返回值的缓存
2.watch常常用于一些开销较大的操作，如果监听的数据有频繁的变化，会造成性能问题。 事实上computed能做的，watch也都能做，只是computed更加专精一些

v-for遍历必须要为item添加key值

key是vue.js识别dom结点的唯一标识，用于追踪结点的变化。如果没有设置key，当结点发生变化的时候，就会触发v-for里面的大量不必要的重复渲染，造成性能问题

v-if和v-for不要连用

因为v-for的优先级大于v-if，就会导致每一项都要进行条件判断，带来额外的性能开销。
这里建议使用computed代替v-if进行条件判断，比如下面的例子。里面的filter就是放的if的条件判断

<template>
  <ul>
    <li v-for="user in activeUsers" :key="user.id">
      {{ user.name }}
    </li>
  </ul>
</template>

<script>
export default {
  computed: {
    activeUsers() {
      return this.users.filter(user => user.isActive);
    }
  },
  data() {
    return {
      users: [
        { id: 1, name: "喵喵侠", isActive: true },
        { id: 2, name: "三掌柜", isActive: false },
        { id: 3, name: "杨不易呀", isActive: true }
      ]
    };
  }
};
</script>

使用Object.freeze()

当有一部分数据对象不需要响应式检测他们的变化时，我们可以像这样

const largeData = {
  /* 大型数据对象 */
};

this.largeData = Object.freeze(largeData);