How to optimize performance in Vue.js? 9 tips to share

How to optimize performance in Vue.js? The following article will share with you nine tips for performance optimization in Vue.js. I hope it will be helpful to you!

(Learning video sharing: vuejs tutorial)

01 Functional components

**Principle: ****Functional component**Compared with ordinary components, it has no state (no responsiveness data), no instance (no this context). We can think of a functional component as a function in the component. The input parameter is the render context and the return value is the rendered HTML. Precisely because functional components simplify a lot of processing such as responsiveness and hook functions, rendering performance will be improved to a certain extent.

Applicable scenarios:

1. Pure display components that do not require responsive data and processing logic

2. Higher-order components used to mark or provide basic functions

3. Elements in the loop (v-for)

02 Child component splitting

**Principle: **In the code before optimization, every time the number passed in props occurs It will be re-rendered when it changes, and the heavy function will be called again during the rendering process to perform performance-consuming operations. The optimized code logic is to encapsulate complex operations in sub-components. Since Vue updates are at component granularity, when the incoming number changes, the parent component will be re-rendered, and the sub-component does not depend on the number because it does not depend on the number. Will not re-render. The number of calculations performed is reduced, and the performance is naturally improved.

**Another: **You can actually use computed properties to optimize here (it will not be recalculated when the external dependencies have not changed, and the cost of additional rendering of subcomponents is saved)

03 Local variables

**Principle: **Comparing the before and after code, you can find that the difference is: before optimization The code directly references this.base every time it performs calculations, and the optimized code caches this.base using the local variable base, and calls the local variable for calculations in subsequent calculations. Why is there such an obvious performance difference? The reason is that every time this.base is accessed, since this.base is a calculated property, a piece of logic code will be executed to see if the existing dependencies have changed. If they have changed, they will be recalculated. If not, the last calculated value will be returned. The performance consumption of this type of calculation logic may not be obvious when it is called only a few times, but if it is executed too much (similar to the example where 300 components are updated per frame, and each component calls this.base multiple times within one update), then There will be a relatively large performance difference.

04 Reuse DOM with v-show

##Principle:

• Implementation method: v-if dynamically adds or deletes DOM elements to the DOM tree, v-show controls visibility by setting the display style attribute of the DOM element.

• Compilation process: v-if switching has a partial compilation and uninstallation process. During the switching process, internal event listeners and sub-components are properly destroyed and rebuilt. v-show is simply based on CSS. switch.

• Compilation conditions: v-if is lazy, if the initial condition is false, do nothing, and only start partial compilation when the condition becomes true for the first time, v -show is compiled under all conditions, then cached, and the DOM elements are preserved.

• Performance consumption: v-if has a higher switching cost, v-show has a higher initial rendering cost.

• Сценарии использования: v-if подходит для ситуаций, когда условия вряд ли изменятся, v-show подходит для ситуаций, когда условия часто переключаются.

05 Keep-alive

06 Отложенные функции

07 Временное разделение

** Принцип : **Использование разделения времени позволяет избежать одновременной отправки слишком большого количества данных, что приведет к слишком длительному внутреннему времени выполнения JS, блокировке процесса пользовательского интерфейса и зависанию страницы.

**Еще: **При выполнении трудоемкой обработки задач мы обычно добавляем эффект загрузки, но путем сравнения до и после оптимизации можно обнаружить, что до оптимизации JS работал уже долгое время , блокируя процесс пользовательского интерфейса, поэтому он не Анимация загрузки не будет отображаться; после оптимизации, поскольку трудоемкая задача разделена на несколько временных интервалов для отправки, время выполнения одного JS сокращается, а анимация загрузки также имеет шанс быть оказанным.

08 Нереактивные данные

**configurable: false** используется для предотвращения изменения и удаления флагов атрибутов, но разрешает изменение значения объекта;

**Object.freeze(obj)** Добавление/удаление/изменение атрибутов запрещено. Установите 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 Виртуальная прокрутка

Guillaume Chau. Заинтересованные студенты могут изучить его реализацию исходного кода. Основной принцип заключается в отслеживании событий прокрутки, динамическом обновлении элементов DOM, которые необходимо отображаются и вычисляют их смещение в пределах вида. Компонент виртуальной прокрутки требует затрат, поскольку его необходимо рассчитывать в реальном времени во время процесса прокрутки, поэтому потребуется определенная стоимость выполнения сценария. Поэтому, если объем данных в списке не очень велик, нам достаточно использовать обычную прокрутку

Эта статья воспроизведена по адресу: https://juejin.cn/post/7084809333740929061

разработка веб-интерфейса)

The above is the detailed content of How to optimize performance in Vue.js? 9 tips to share. For more information, please follow other related articles on the PHP Chinese website!