一.vue設計原則的理解
首先就是漸進式JavaScript框架：
與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。
Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。
另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。
易用性
vue提供數據響應式、聲明式模板語法和基於配置的組件系統等核心特性。
這些使我們只需要關注應用的核心業務即可，只要會寫js、html和css就能輕松編寫vue應用。
靈活性
漸進式框架的最大優點就是靈活性，如果應用足夠小，我們可能僅需要vue核心特性即可完成功能；
隨着應用規模不斷擴大，我們才可能逐漸引入路由、狀態管理、vue-cli等庫和工具；
不管是應用體積還是學習難度都是一個逐漸增加的平和曲線。
高效性
超快的虛擬 DOM 和 diff 算法使我們的應用擁有最佳的性能表現。
追求高效的過程還在繼續，vue3中引入Proxy對數據響應式改進以及編譯器中對於靜態內容編譯的改進都會讓vue更加高效。
二. Vue性能優化方法
首先，我們要找到VUE性能的現存問題，大部分都是代碼層面的，然后具體的提出代碼層優化意見就可以了。
目前所知的VUE代碼層優化大致為一下11點：
●路由懶加載
●keep-alive緩存頁面
●使用v-show復用DOM
●v-for 遍歷避免同時使用 v-if
●長列表性能優化
●事件的銷毀
●圖片懶加載
●第三方插件按需引入
●無狀態的組件標記為函數式組件
●子組件分割
●變量本地化
●SSR
下面是針對這11個優化點給出的具體優化方案：
●路由懶加載
const router = new VueRouter({ routes: [ { path: '/foo', component: () => import('./Foo.vue') } ] })
●keep-alive緩存頁面
<template>
<div id="app">
<keep-alive>
<router-view/>
</keep-alive>
</div>
</template>
●使用v-show復用DOM
●v-for 遍歷避免同時使用 v-if
●長列表性能優化：
如果列表是純粹的數據展示，不會有任何改變，就不需要做響應化
如果是大數據長列表，可采用虛擬滾動，只渲染少部分區域的內容
參考：
vue-virtual-scroller
https://github.com/Akryum/vue-virtual-scroller
vue-virtual-scroll-list
https://github.com/tangbc/vue-virtual-scroll-list
●事件的銷毀：
Vue 組件銷毀時，會自動解綁它的全部指令及事件監聽器，但是僅限於組件本身的事件
created() { this.timer = setInterval(this.refresh, 2000) }, beforeDestroy() { clearInterval(this.timer) }
●圖片懶加載
對於圖片過多的頁面，為了加速頁面加載速度。
所以很多時候我們需要將頁面內未出現在可視區域內的圖片先不做加載， 等到滾動到可視區域后再去加載
<img v-lazy="/static/img/1.png">
vue-lazyload
https://github.com/hilongjw/vue-lazyload
●第三方插件按需引入
像element-ui這樣的第三方組件庫可以按需引入，避免體積太大
import Vue from 'vue';
import { Button, Select } from 'element-ui';
Vue.use(Button)
Vue.use(Select)
●無狀態的組件標記為函數式組件
●子組件分割
●變量本地化
●服務端渲染 - SSR
三.Vue3.0的新特性
●更快
○虛擬DOM重寫
○優化slots的生成
○靜態樹提升
○靜態屬性提升
○基於Proxy的響應式系統
●更小：
○通過搖樹優化核心庫體積
●更容易維護：
○TypeScript + 模塊化
●更加友好
○跨平台：編譯器核心和運行時核心與平台無關，使得Vue更容易與任何平台（Web、Android、iOS）一起使用
●更容易使用
○改進的TypeScript支持，編輯器能提供強有力的類型檢查和錯誤及警告
●更好的調試支持
●獨立的響應化模塊
●Composition API
虛擬 DOM 重寫
期待更多的編譯時提示來減少運行時開銷，使用更有效的代碼來創建虛擬節點。
組件快速路徑+單個調用+子節點類型檢測
▷跳過不必要的條件分支
▷JS引擎更容易優化
