1. Understand the Vue rendering mechanism
It is a responsive framework, and the rendering of components depends on changes in data. Vue rerenders the component when the responsive data of the component changes. Whenever data is updated, Vue will perform the diff algorithm of the virtual DOM to compare the old and new DOMs and update the changed parts.
Unfortunately, if a component's dependent data changes multiple times over a short period of time, it may be rendered frequently, causing performance issues. Therefore, it is crucial to optimize the rendering of components.
2. Use Computational Properties
Computational properties are a powerful feature of Vue, which is used to handle complex logic that can cache dependent data without changes, avoid unnecessary rendering. This is a simple way to prevent repeated renderings.
Sample code:
<template>
<div>
<h1>{{ fullName }}</h1>
<input v-model="firstName" placeholder="First Name" />
<input v-model="lastName" placeholder="Last Name" />
</div>
</template>
<script>
export default {
data() {
return {
firstName: '',
lastName: ''
};
},
computed: {
fullName() {
// Computation attributes are recalculated only when firstName or lastName change return `${} ${}`;
}
}
};
</script>
In this example,fullNameThe calculation attributes will be based onfirstNameandlastNameThe changes are updated in real time, but will only be recalculated when one of them changes. This can effectively reduce the repeated rendering of components.
3. Use close monitoring
In some cases, it is possible to usewatchListeners to accurately control component updates. By listening for specific data changes, it is possible to choose to update components only if needed.
Sample code:
<template>
<div>
<h1>Current value: {{ value }}</h1>
<button @click="increment">Increase</button>
</div>
</template>
<script>
export default {
data() {
return {
value: 0
};
},
methods: {
increment() {
++;
}
},
watch: {
value(newValue) {
if (newValue % 5 === 0) {
// Re-render only when value is multiple of 5 ('Value is a multiple of 5:', newValue);
}
}
}
};
</script>
In this code, the component will listenvaluechange, but only invalueThe specific logic will be performed only when it is a multiple of 5, reducing redundant rendering operations.
4. Apply v-if and v-show
v-ifandv-showare two instructions provided by Vue that can dynamically render or hide components according to conditions. usev-ifThe component is rendered only when the condition is real, andv-showThen it is rendering all the time, just to control whether it is displayed or not based on the conditions.
Sample code:
<template>
<div>
<button @click="toggle">Switch display</button>
<div v-if="isVisible">
<p>This component is rendered dynamically！</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: false
};
},
methods: {
toggle() {
= !;
}
}
};
</script>
In this example, byisVisibleState controls the rendering of components. Only inisVisiblefortrueThe component will be rendered only when it is rendered. This can effectively avoid unnecessary rendering.
5. Use the keep-alive component
If your Vue app contains multiple usesv-iforv-showThe rendered components can be consideredkeep-aliveComponents. It can retain its state when switching components, avoid repeated rendering of components, and improve performance.
Sample code:
<template>
<div>
<button @click="currentView = 'ComponentA'">Loading components A</button>
<button @click="currentView = 'ComponentB'">Loading components B</button>
<keep-alive>
<component :is="currentView"></component>
</keep-alive>
</div>
</template>
<script>
import ComponentA from './';
import ComponentB from './';
export default {
data() {
return {
currentView: 'ComponentA'
};
},
components: {
ComponentA,
ComponentB
}
};
</script>
In the above code, usekeep-aliveIt can maintain the state of the component to avoid unnecessary rendering when component switching. This improves the user experience.
6. Avoid unnecessary props updates
When the props of the parent component are passed to the child component, if props are updated, the child component will be re-rendered. To avoid unnecessary rendering, you can usev-bindAttach props and carefully design the changes in props.
Sample code:
<template>
<div>
<child-component :data="childData"></child-component>
<button @click="updateData">Update data</button>
</div>
</template>
<script>
import ChildComponent from './';
export default {
components: { ChildComponent },
data() {
return {
childData: { value: 0 }
};
},
methods: {
updateData() {
++;
}
}
};
</script>
In the above example, the data of the subcomponent is rendered by props, ensuring that new objects are passed when the data is updated, preventing the subcomponent from rendering repeatedly. If more flexible control is required, consider using the v-once directive or partial updates to complex props.
7. Summary
Through the explanation of this article, it can be seen that preventing repeated rendering of Vue components not only depends on the application of technology, but also requires good architecture and design thinking. When using the development application, the rational use of computational attributes, observers, conditional rendering, state management and keep-alive components can effectively reduce repeated rendering and improve application performance. Such optimization can not only improve the application's response speed, but also improve the user's user experience.
The above is a detailed example of how to prevent repeated rendering of Vue components. For more information about repeated rendering of Vue components, please pay attention to my other related articles!