一.vue設計原則的理解
首先就是漸進式JavaScript框架：javascript
與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。css
Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。html
另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。vue
易用性java
vue提供數據響應式、聲明式模板語法和基於配置的組件系統等核心特性。git
這些使咱們只須要關注應用的核心業務便可，只要會寫js、html和css就能輕鬆編寫vue應用。github
靈活性算法
漸進式框架的最大優勢就是靈活性，若是應用足夠小，咱們可能僅須要vue核心特性便可完成功能；vue-cli
隨着應用規模不斷擴大，咱們纔可能逐漸引入路由、狀態管理、vue-cli等庫和工具；element-ui
無論是應用體積仍是學習難度都是一個逐漸增長的平和曲線。
高效性
超快的虛擬 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引擎更容易優化