Vue.js中如何最佳化效能？ 9個小技巧分享

Vue.js中如何最佳化效能？以下這篇文章跟大家分享Vue.js 效能優化的九個小技巧，希望對大家有幫助！

（學習影片分享：vuejs教學）

01 Functional components

#**原理：****函數式元件**與普通元件相比，它沒有狀態（沒有響應式資料），沒有實例（沒有this 上下文）。我們可以把函數式元件想像成元件裡的函數，入參是渲染上下文（render context），回傳值是渲染好的 HTML。正是因為函數式元件精簡了許多例如響應式和鉤子函數的處理，因此渲染性能會有一定提高。

適用場景：

1. 不需要響應式資料及處理邏輯的純粹展示元件

2. 用來標記或提供基本功能的高階元件

3. 迴圈（v-for）中的元素

02 Child component splitting

#**原理：**在最佳化前的程式碼中，每次props 傳入的number 發生變化時都會重新渲染，在渲染的過程中會重新呼叫heavy 函數進行耗效能的運算。而優化後的程式碼邏輯是將複雜運算封裝在子元件內，由於Vue 的更新是元件粒度的，當傳入的number 發生變化時，父元件會重新渲染，而子元件由於並不依賴number 因此並不會重新渲染。執行計算的次數少了，效能自然也提升了。

**另：**這裡其實也可以用computed 計算屬性來優化（外部依賴沒有變化時不會重新計算，而且省去了額外渲染子元件的開銷）

03 Local variables

**原理：**對比前後程式碼可以發現差異在於：最佳化前的程式碼在進行計算時每次都直接引用this.base，而優化後的程式碼將this.base 使用局部變數base 進行了緩存，在之後的計算中都調用局部變數進行計算。為什麼會造成如此明顯的效能差異呢？原因在於每次存取 this.base 時，由於 this.base 是計算屬性，因此會執行一段邏輯程式碼查看現有的依賴項是否發生變化，如果發生變化則重新計算，沒有則傳回上一次計算值。這類計算邏輯的效能消耗在僅僅多呼叫幾次時可能還不明顯，但執行多了（類似範例每幀更新300 個元件，每個元件在一次更新內又呼叫了多次this.base）則會有比較大的性能差異。

04 Reuse DOM with v-show

#原則：

• 實作方式：v-if 是動態的新增或刪除DOM 樹內或刪除DOM 元素，v-show 是透過設定DOM 元素的display 樣式屬性來控制顯隱。

• 編譯過程：v-if 切換有一個局部編譯卸載的過程，切換過程中適當地銷毀和重建內部的事件監聽和子元件，v-show 只是簡單的基於CSS切換。

• 編譯條件：v-if 是惰性的，如果初始條件為假，則什麼也不做，只有在條件第一次變成真時才開始局部編譯， v -show 是在任何條件下都被編譯，然後被緩存，而且DOM 元素保留。

• 效能消耗：v-if 有更高的切換消耗，v-show 有更高的初始渲染消耗。

• Usage scenarios: v-if is suitable for situations where conditions are unlikely to change, v-show is suitable for situations where conditions are frequently switched.

05 Keep-alive

##**Principle: **In non-optimized scenarios, every time we click the button to switch the routing view, the component will be re-rendered. The rendering component will go through component initialization, render, patch and other processes. If the component is more complex , or if the nesting is deeper, the entire rendering will take a long time. After using KeepAlive, the vnode and DOM of the component wrapped by KeepAlive will be cached after the first rendering, and then the next time the component is rendered again, the corresponding vnode and DOM will be obtained directly from the cache. Then for rendering, there is no need to go through a series of processes such as component initialization, render and patch, etc., which reduces the script execution time and provides better performance.

But using the KeepAlive component is not without cost, because it will occupy more memory for caching. This is a typical application of space-for-time optimization ideas.

06 Deferred features

where deferMixin is as follows:

**Principle: **The main idea of ​​Defer is to split one rendering of a component into multiple times. It maintains the displayPriority variable internally, and then passes requestAnimationFrame It is incremented each frame when rendering, up to count. Then within the component using the Defer mixin, you can use v-if="defer(xxx)" to control the rendering of certain blocks when the displayPriority is increased to xxx.

When you have components that take time to render, it is a good idea to use Deferred for progressive rendering. It can avoid rendering being stuck due to JS execution taking too long.

07 Time slicing

##** Principle: **Using time slicing can avoid submitting too much data at one time, causing the internal JS execution time to be too long, blocking the UI process and causing the page to freeze.

**Another: **When executing time-consuming task processing, we usually add a loading effect, but through comparison before and after optimization, we can find that before optimization, JS has been running for a long time, blocking the UI process, so it does not The loading animation will not be displayed; after optimization, since the time-consuming task is divided into multiple time slices for submission, the single JS running time is shortened, and the loading animation also has a chance to be rendered.

08 Non-reactive data

## **Principle:** When submitting data internally, the newly submitted data will be defined as responsive by default. If the sub-property of the object is an object, the sub-property will also be recursively made responsive. Therefore, when too much data is submitted, the whole process is very time-consuming. After optimization, the attribute flag configurable in data is manually changed to false, so that the object attribute array obtained internally through Object.keys(obj) will ignore data, and the data attribute will not be definedReactive, because data points to an object. , which will also reduce the recursive response logic, which is equivalent to reducing the performance loss of this part. The larger the amount of data, the more obvious the effect of this optimization will be.

The difference between setting configurable and using Object.freeze directly is:

**configurable: false**

is used to prevent changes and deletions of attribute flags, but allows changes The value of the object;

**Object.freeze(obj)** Adding/removing/changing attributes is prohibited. Set configurable: false, writable: false for all existing properties.

// 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

**Principle:**Virtual scrolling is implemented by rendering only the DOM within the view range , the performance will naturally be much better when rendering less content. The virtual scrolling component is also written by Guillaume Chau. Interested students can study its source code implementation. The basic principle is to monitor scrolling events, dynamically update the DOM elements that need to be displayed, and calculate Their displacement within the view. The virtual scrolling component is not without cost, because it needs to be calculated in real time during the scrolling process, so there will be a certain script execution cost. Therefore, if the amount of data in the list is not very large, it is enough for us to use ordinary scrolling

This article is reproduced from: https://juejin.cn/post/7084809333740929061

(Learning video sharing: web front-end development)

以上是Vue.js中如何最佳化效能？ 9個小技巧分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！