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)
**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:
Pure display components that do not require responsive data and processing logic
Higher-order components used to mark or provide basic functions
Elements in the loop (v-for)
**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)
**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.
##Principle:
Сценарии использования: v-if подходит для ситуаций, когда условия вряд ли изменятся, v-show подходит для ситуаций, когда условия часто переключаются.
** Принцип : **Использование разделения времени позволяет избежать одновременной отправки слишком большого количества данных, что приведет к слишком длительному внутреннему времени выполнения JS, блокировке процесса пользовательского интерфейса и зависанию страницы.
**Еще: **При выполнении трудоемкой обработки задач мы обычно добавляем эффект загрузки, но путем сравнения до и после оптимизации можно обнаружить, что до оптимизации JS работал уже долгое время , блокируя процесс пользовательского интерфейса, поэтому он не Анимация загрузки не будет отображаться; после оптимизации, поскольку трудоемкая задача разделена на несколько временных интервалов для отправки, время выполнения одного JS сокращается, а анимация загрузки также имеет шанс быть оказанным.
**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"复制代码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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
