[性能优化]Vue.js篇

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

• v-show
  如果渲染的很频繁，则使用v-show。只是简单地基于 CSS 的 display 属性进行切换。
• v-if
v-if的值为true，表示元素显示；如果v-if值为false，表示元素隐藏。但隐藏是会删除dom。

computed 和 watch 区分使用场景

• computed
  计算属性，直接作用于数据。但是computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；
• watch
  更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；

所以，可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；

事件的销毁

Vue 组件销毁时，会自动清理它与其它实例的连接，解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。 如果在 js 内使用 addEventListene 等方式是不会自动销毁的，我们需要在组件销毁时手动移除这些事件的监听，以免造成内存泄露，如：

created() {
  addEventListener('click', this.click, false)
},
beforeDestroy() {
//移除监听事件
  removeEventListener('click', this.click, false)
}

图片懒加载

• 安装插件

npm install vue-lazyload --save-dev

• 在入口文件 man.js 中引入并使用

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

• 或者添加自定义选项

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

• 在 vue 文件中将 img 标签的 src 属性直接改为 v-lazy ，从而将图片显示方式更改为懒加载显示：

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

路由懒加载

Vue 是单页面应用，可能会有很多的路由引入 ，这样使用 webpcak 打包后的文件很大，当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提高首屏显示的速度，但是可能其他的页面的速度就会降下来。

const Foo = () => import('./Foo.vue')//这一步是关键

//路由配置照常写
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

按需引入第三方组件

• 首先，安装 babel-plugin-component ：

npm install babel-plugin-component -D

• 然后，将 .babelrc 修改为：

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

• 在 main.js 中引入部分组件：

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

 Vue.use(Button)
 Vue.use(Select)