Vue 项目开发过程性能优化

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

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

2、computed 和 watch 区分使用场景

当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；

当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

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

在列表数据进行遍历渲染时，需要为每一项 item 设置唯一 key 值，方便 Vue.js 内部机制精准找到该条列表数据。当 state 更新时，新的状态值和旧的状态值对比，较快地定位到 diff 。v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性。

4、长列表性能优化

有些时候我们的组件就是纯粹的数据展示，不会有任何改变，为减少组件初始化的时间，可以通过 Object.freeze 方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。

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

5、事件销毁

在 js 内使用 addEventListene 等方式是不会自动销毁的，我们需要在组件销毁时手动移除这些事件的监听，以免造成内存泄露，如：

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

6、图片资源懒加载

使用 Vue 的 vue-lazyload 插件：

1、安装插件

npm install vue-lazyload --save-dev      
复制代码

2、在main.js中引入并使用

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)          
复制代码

3、自定义使用选项(可选)

Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
复制代码

4、使用(将 img 标签的 src 属性直接改为 v-lazy)

<img v-lazy="/static/img/1.png">              
复制代码

7、路由懒加载

把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。这样会提高首屏显示的速度

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

8、第三方插件的按需引入

借助 babel-plugin-component ，然后可以只引入需要的组件，以达到减小项目体积的目的

1、安装babel-plugin-component

npm install babel-plugin-component -D
复制代码

2、修改 .babelrc

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
复制代码

3、在 main.js 中引入部分组件

import Vue from 'vue';
import { Button, Select } from 'element-ui';

 Vue.use(Button)
 Vue.use(Select)
复制代码

9、优化无限列表性能

参考开源项目 vue-virtual-scroll-list 和 vue-virtual-scroller 来优化这种无限列表的场景的；

---