vue性能优化，也是vue面试的重点-vue代码层优化

学习地址：https://mp.weixin.qq.com/s/l8isi43gxWqNRVjLgEGHkQ

vue性能优化可以从以下三个方面入手：

1. vue代码层
2. webpack配置层
3. 基础的web技术层面

一：vue代码层优化

1.v-if 和 v-show 区分使用场景

v-if是真的条件渲染，如果初始值为false，那么它什么都不做，直到条件变为true，才会渲染代码块。

v-show只是做了一个css样式display的block和none的切换。不管初始值为什么都会渲染代码块。

所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景

2.computed 和 watch 区分使用场景

computed计算属性，依赖于其他属性值，并且computed值具有缓存，只有其依赖属性发生改变时，才会在下一次获取computed的值时重新计算。

watch监听属性，每次监听的属性发生变化都会执行回调进行操作。

computed多用于数值计算，且依赖其他属性。比如说：购物车结算。

watch多用于监听一个数据变化后进行一些异步操作或者开销较大的操作。

3.v-for的遍历循环的item添加key，且不与v-if同时使用

添加key的好处是，便于vuejs内部机制可以通过唯一key值来快速找到该条数据；

v-for的优先级大于v-if，所以v-if的出现会影响渲染速度。

如果是很小的一部分循环可以使用computed来优化

<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id">
    {{ user.name }}
  </li>
</ul>
<script>
computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
 return user.isActive
    })
  }
}
</script>

4.长列表的性能优化

Vue 是通过 Object.defineProperty 方法来进行对数据的劫持，从而实现视图响应数据的变化。如果我们一个组件的数据只是一些不会变化的数据，那么我们就需要禁止这种劫持来提高性能。

Object.freeze 方法的作用是冻结一个对象，一旦对象被冻结，它就再也不能被修改了。

export default {
  data: () => ({
    users: {}
  }),
  async created() {
    const users = await axios.get("/api/users");
    this.users = Object.freeze(users);
  }
};

5.事件的销毁

vue组件会自动清理与其实例有关的事件监听和有关指令。不过如在js中我们写了定时器或者addEventListenerEventListener等方法是不会自动销毁的，需要我们在组件销毁前钩子函数中手动销毁，例：

beforeDestroy() {
  removeEventListener('click', this.click, false)
}

6.图片资源懒加载

如果一个页面的图片过多，可能会导致页面渲染效率低，用户体验不好。我们可以使用插件来做到让屏幕滑到该区域是才加载该区域的图片。

首先安装插件：npm install vue-lazyload --save

然后在入口文件main.js中

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

最后vue页面上使用：

<img v-lazy="/static/img/1.png">

7.路由懒加载

Vue 是单页面应用，可能会有很多的路由引入 ，这样使用 webpcak 打包后的文件很大，当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。

路由懒加载方式

const Foo = () => import('./Foo.vue')
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

8.其他，有兴趣可以看开头网址继续学习。

下一篇：webpack配置层优化