一.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引擎更容易優化
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/2145.html
標籤：其他
上一篇：陣列---構建乘積陣列