建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹“Vue.js中怎么優(yōu)化性能”，在日常操作中，相信很多人在Vue.js中怎么優(yōu)化性能問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue.js中怎么優(yōu)化性能”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：空間域名、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設、道縣網(wǎng)站維護、網(wǎng)站推廣。
01 Functional components
原理：****函數(shù)式組件**與普通組件相比，它沒有狀態(tài)（沒有響應式數(shù)據(jù)），沒有實例 （沒有 this 上下文）。我們可以把函數(shù)式組件想像成組件里的一個函數(shù)，入?yún)⑹卿秩旧舷挛模╮ender context），返回值是渲染好的 HTML。正是因為函數(shù)式組件精簡了很多例如響應式和鉤子函數(shù)的處理，因此渲染性能會有一定提高。
適用場景：
不需要響應式數(shù)據(jù)及處理邏輯的純展示組件
用來標記或提供基本功能的高階組件
循環(huán)（v-for）中的元素
02 Child component splitting
原理：**在優(yōu)化前的代碼中，每次 props 傳入的 number 發(fā)生變化時都會重新渲染，在渲染的過程中又會重新調(diào)用 heavy 函數(shù)進行耗性能的運算。而優(yōu)化后的代碼邏輯是將復雜運算封裝在子組件內(nèi)，由于 Vue 的更新是組件粒度的，當傳入的 number 發(fā)生變化時，父組件會重新渲染，而子組件由于并不依賴 number 因此并不會重新渲染。執(zhí)行計算的次數(shù)少了，性能自然也提升了。
**另：**這里其實也可以用 computed 計算屬性來優(yōu)化（外部依賴沒有變化時不會重新計算，而且省去了額外渲染子組件的開銷）
03 Local variables
原理：**對比前后代碼可以發(fā)現(xiàn)區(qū)別在于：優(yōu)化前的代碼在進行計算時每次都直接引用 this.base，而優(yōu)化后的代碼將 this.base 使用局部變量 base 進行了緩存，在之后的計算中都調(diào)用局部變量進行計算。為什么會造成如此明顯的性能差異呢？原因在于每次訪問 this.base 時，由于 this.base 是計算屬性，因此會執(zhí)行一段邏輯代碼查看已有的依賴項是否發(fā)生變化，如果發(fā)生變化則重新計算，沒有則返回上一次計算值。這類計算邏輯的性能消耗在僅僅多調(diào)用幾次時可能還不明顯，但執(zhí)行多了（類似示例每幀更新 300 個組件，每個組件在一次更新內(nèi)又調(diào)用了多次 this.base）則會有比較大的性能差異。
04 Reuse DOM with v-show
原理：
實現(xiàn)方式：v-if 是動態(tài)的向 DOM 樹內(nèi)添加或者刪除 DOM 元素，v-show 是通過設置 DOM 元素的 display 樣式屬性控制顯隱。
編譯過程：v-if 切換有一個局部編譯卸載的過程，切換過程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件，v-show 只是簡單的基于 CSS 切換。
編譯條件：v-if 是惰性的，如果初始條件為假，則什么也不做，只有在條件第一次變?yōu)檎鏁r才開始局部編譯， v-show 是在任何條件下都被編譯，然后被緩存，而且 DOM 元素保留。
性能消耗：v-if 有更高的切換消耗，v-show 有更高的初始渲染消耗。
使用場景：v-if 適合條件不太可能改變的情況，v-show 適合條件頻繁切換的情況。
05 Keep-alive
原理：**在非優(yōu)化場景下，我們每次點擊按鈕切換路由視圖，都會重新渲染一次組件，渲染組件就會經(jīng)過組件初始化，render、patch 等過程，如果組件比較復雜，或者嵌套較深，那么整個渲染耗時就會很長。而在使用 KeepAlive 后，被 KeepAlive 包裹的組件在經(jīng)過第一次渲染后的 vnode 以及 DOM 都會被緩存起來，然后再下一次再次渲染該組件的時候，直接從緩存中拿到對應的 vnode 和 DOM，然后渲染，并不需要再走一次組件初始化，render 和 patch 等一系列流程，減少了 script 的執(zhí)行時間，性能更好。
但是使用 KeepAlive 組件并非沒有成本，因為它會占用更多的內(nèi)存去做緩存，這是一種典型的空間換時間優(yōu)化思想的應用。
06 Deferred features
其中 deferMixin 如下：
原理：**Defer 的主要思想就是把一個組件的一次渲染拆成多次，它內(nèi)部維護了 displayPriority 變量，然后在通過 requestAnimationFrame 在每一幀渲染的時候自增，最多加到 count。然后使用 Defer mixin 的組件內(nèi)部就可以通過 v-if="defer(xxx)" 的方式來控制在 displayPriority 增加到 xxx 的時候渲染某些區(qū)塊了。
當你有渲染耗時的組件，使用 Deferred 做漸進式渲染是不錯的注意，它能避免一次 render 由于 JS 執(zhí)行時間過長導致渲染卡住的現(xiàn)象。
07 Time slicing
原理：**使用時間分片可以避免一次性提交的數(shù)據(jù)過多，內(nèi)部 Js 執(zhí)行時間過長，阻塞 UI 進程導致頁面卡死。
另：**在執(zhí)行耗時任務處理時，我們通常會加一個 loading 效果，但通過優(yōu)化前后對比可以發(fā)現(xiàn)：優(yōu)化前 JS 一直長時間運行，阻塞 UI 進程，因此并不會展示 loading 動畫；優(yōu)化后由于將耗時任務拆成多個時間片提交，單次 JS 運行時間變短了，loading 動畫也有機會渲染了。
08 Non-reactive data
原理：**內(nèi)部提交數(shù)據(jù)時會默認將新提交的數(shù)據(jù)定義成響應式，如果對象的子屬性是對象，還會遞歸讓子屬性也變成響應式。因此當提交數(shù)據(jù)過多時，整個過程十分耗時。而優(yōu)化后通過將 data 中的屬性標志 configurable 手動變成 false，這樣內(nèi)部通過 Object.keys(obj) 獲取對象屬性數(shù)組會忽略 data，也就不會為 data 這個屬性 defineReactive，由于 data 指向的是一個對象，這樣也就會減少遞歸響應式的邏輯，相當于減少了這部分的性能損耗。數(shù)據(jù)量越大，這種優(yōu)化的效果就會更明顯。
設置 configurable 與直接使用 Object.freeze 的區(qū)別是：
**configurable: false**的用途是防止更改和刪除屬性標志，但是允許更改對象的值；
**Object.freeze(obj)**禁止添加/刪除/更改屬性。為所有現(xiàn)有的屬性設置 configurable: false, writable: false。
// configurable: false
let user = {
name: "John"
};
Object.defineProperty(user, "name", {
configurable: false
});
user.name = "Pete"; // 正常工作
delete user.name; // Error
// Object.freeze(obj)
let user = {
name: "John"
};
Object.freeze(user);
user.name = "Pete";
console.log(user.name); // "John"復制代碼09 Virtual scrolling
原理：**虛擬滾動的實現(xiàn)方式是僅渲染視圖范圍內(nèi)的 DOM，渲染內(nèi)容少時性能自然會好很多。虛擬滾動組件也是 Guillaume Chau 寫的，感興趣的同學可以去研究它的源碼實現(xiàn)，基本原理就是監(jiān)聽滾動事件，動態(tài)更新需要顯示的 DOM 元素，計算出它們在視圖中的位移。虛擬滾動組件也并非沒有成本，因為它需要在滾動的過程中實時去計算，所以會有一定的 script 執(zhí)行的成本。因此如果列表的數(shù)據(jù)量不是很大的情況，我們使用普通的滾動就足夠了
到此，關于“Vue.js中怎么優(yōu)化性能”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
新聞標題：Vue.js中怎么優(yōu)化性能
本文鏈接：http://fisionsoft.com.cn/article/gepdpj.html
