Vue性能优化

一、Object.freeze()

如果我们已知该数据是不会改变的，就不需要Vue将其设置成响应式的了，利用 Object.freeze()，该方法可以冻结一个对象，使该对象不能被修改。Vue就不能够为对象添加，setter getter等数据劫持的方法。

export default {
  data() {
    return {
      obj: {}
    }
  },
  created() {
    // 返回一个冻结的对象参数和返回值是全等的。
    this.obj = Object.freeze({a: 0, b: 1})
    console.log(this.obj)
  }
}

 控制台打印出该对象没有getter和setter

二、v-if 和 v-show

v-if 会根据条件进行元素的销毁和重建，如果初始状态下条件为假，则根本不会渲染。

v-show 不论条件是什么都会渲染元素，只是基于 css 的 display 属性进行切换。

综上，v-if 适用于元素很少进行显示与隐藏的切换，而v-show适用于，元素需要频繁的进行切换。

三、computed和watch的使用

computed和watch都有监听数据的作用，但两者使用上有所不同。

computed 是计算属性，是描述依赖响应式状态的复杂逻辑，也就是说，计算出来的值，是依赖vue中其他的响应式数据的。

watch 是侦听器，用来监听数据的改变，并执行一些操作。

他们之间的不同除了应用场景外，计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。

<template>
  <div>
    {{ totalPrice }}
    {{ totalPrice }}
    {{ totalPrice }}
    {{ totalPrice }}
    {{ init() }}
    {{ init() }}
    {{ init() }}
    {{ init() }}
    <button @click="count++">+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
      price: 12
    }
  },
  computed: {
    totalPrice() {
      console.log('computed')
      return this.count * this.price
    }
  },
  watch: {
    totalPrice(newValue, oldValue) {
      console.log('watch')
    }
  },
  methods: {
    init() {
      console.log('method')
    }
  }
}
</script>

 如上所示，执行了一次computed，证明当第一次执行的时候计算属性值被缓存下来了，但是执行了四次init方法。

四、v-for key 和 v-if

v-for 遍历时要给遍历的元素添加一个 key（唯一） ，这样做是为了方便vue内部准确找到该元素，当数据变化时根据key对比，从而判断是否复用旧节点。；且避免同时使用 v-if，因为v-for的优先级比v-if高，每次都会先遍历整个数组；可以先把数据筛选好了在进行遍历，不要用 v-if 再进行判断了。

五、事件的销毁

Vue组件销毁时，会自动清理它与其它实例的连接，解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。如果在 js 内，我们需要手动关闭定时器，取消订阅的消息，解除自定义事件等收尾操作。

六、图片懒加载

vue-lazyload 插件

七、路由懒加载

// 导入组件的收用该方式
const Foo = () => import('./Foo.vue')
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

八、第三方插件按需引入

可以减小项目体积

九、使用 keep-alive 缓存组件

通过<keepAlive>组件强制被切换掉的组件仍然保持“存活”的状态。