vue-效能優化
1.路由懶載入
懶載入簡單來說就是延遲載入或按需載入，即在需要的時候的時候進行載入
常用的懶載入方式有兩種：即使用vue非同步元件和ES中的import
vue非同步元件
{
path: "/login",
name: "Login",
meta: { title: "登入" },
component: resolve => require(["@/views/Login"], resolve)
},
ES中的import
const router = new VueRouter({
routes: [
{ path: '/foo', component: () => import('./Foo.vue') }
]
})
2.keep-alive快取頁面
<template>
<div id="app">
<keep-alive>
<router-view/>
</keep-alive>
</div>
</template>
3.使用v-show複用DOM
4.v-for 遍歷避免同時使用 v-if
v-for比v-if優先，如果每一次都需要遍歷整個陣列，將會影響速度，尤其是當之需要渲染很小一部分的時候。如果連用的話會把 v-if 給每個元素都新增一下,會造成效能問題。一般時候把v-if放在外層，如果不符合就不去執行了。
5.長列表效能優化
我們應該都知道 vue 會通過 object.defineProperty 對資料進行劫持，來實現檢視響應資料的變化，然而有些時候我們的元件就是純粹的資料展示，不會有任何改變，我們就不需要 vue 來劫持我們的資料，在大量資料展示的情況下，這能夠很明顯的減少元件初始化的時間。
所以，我們可以通過 object.freeze 方法來凍結一個物件，這個物件一旦被凍結，vue就不會對資料進行劫持了。
export default {
data: () => ({
list: []
}),
async created() {
const list = await axios.get('xxxx')
this.list = Object.freeze(list)
},
methods: {
// 此處做的操作都不能改變list的值
}
另外需要說明的是，這裡只是凍結了 list 的值，引用不會被凍結，當我們需要 reactive 資料的時候，我們可以重新給 list 賦值。
6.圖片懶載入
對於圖片過多的頁面，為了加速頁面載入速度。所以很多時候我們需要將頁面內未出現在可視區域內的圖片先不做載入， 等到滾動到可視區域後再去載入
vue-lazyload
main.js
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// or with options
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
new Vue({
el: 'body',
components: {
App
}
})
template：
<ul>
<li v-for="img in list">
<img v-lazy="img.src" >
</li>
</ul>
7.第三方外掛按需引入
像element-ui這樣的第三方元件庫可以按需引入，避免體積太大
import Vue from 'vue';
import { Button, Select } from 'element-ui';
Vue.use(Button)
Vue.use(Select)
8.無狀態的元件標記為函式式元件
Vue 中的無狀態元件其實就是函式元件。但函式元件又是啥呢? 要回答這個問題，咱們首先必須理解什麼是函數語言程式設計。
與將程式分解為物件的面向物件方法不同，函數語言程式設計鼓勵將程式分解為小函式，這些小函式用於形成更高階的程式。我們建立的函式不依賴於或可以改變任何外部狀態，這導致另一個觀察結果，對於給定的輸入，它們總是返回相同的輸出。
因此，函式元件是沒有狀態的元件，並且可以更改它。函式元件輸出總是基於給定的輸入。在 Vue 方面，這類元件會根據給定的props給出不同的輸出。
Vue 提供了一種定義函式元件的簡單方法。咱們只需要給個functional關鍵字就可以。在 2.5.0 及以上版本中，如果使用了單檔案元件，那麼基於模板的函式式元件可以這樣宣告：
<template functional> <div> 函式/無狀態元件 </div> </template>
9.變數本地化
不要頻繁引用this.data ,使用const data = this.data 代替
10.事件的銷燬
Vue 元件銷燬時，會自動解綁它的全部指令及事件監聽器，但是僅限於元件本身的事件
元件銷燬時，注意清除定時器
created() {
this.timer = setInterval(this.refresh, 2000)
},
beforeDestroy() {
clearInterval(this.timer)
}