Vue two-way data binding framework by DOM and virtual technology, to help us deal with the front-end development in the dirty part of DOM manipulation, we no longer need to consider how to manipulate the DOM and how to operate most efficiently DOM; but still Vue project project exists first screen optimized, Webpack compiler optimization configuration and other issues, so we still need to focus on optimizing the performance of the Vue project to make projects more efficient performance, better user experience.
First, the basic optimization (code and coding standard)
1, v-if used to distinguish and v-show scenes
v-if not rendered DOM, v-show will be pre-rendered DOM, a distinction use
2, computed and used to distinguish watch scenes
computed: the attribute is calculated, dependent on the value of other properties, and the computed values are cached, it depends only attribute value changes, the next time will be recalculated value acquired when the computed value is computed;
watch: more of a "Watch" role, similar to the listener callback certain data, the callback will be executed whenever the data changes when listening for subsequent operations.
Use scenarios:
When we need to calculate the value, and depending on other data, computed should be used, because they can utilize the cache computed properties, avoiding every acquisition value, recalculated;
Ago when we need to perform asynchronous data changes or when the overhead of a larger operation, should use the watch, use the watch option allows us to perform asynchronous operations (access to a API), we limit the frequency of execution of the operation, and the final result in our , an intermediate state. These are computed attribute can not be done.
3, v-for traversal key must be added for the item, and avoid the use of v-if
When traversing the rendering of the list data, we need to set a unique key value to each item, convenient Vue.js internal mechanisms and find exactly the article list data. When the state update, the old and the new state value of the state value comparison, to quickly locate diff.
v-for higher priority than v-if, if every time need to traverse the entire array, will affect the speed, especially when the need to render a small part of the time, if necessary, computed properties should be replaced.
4, event and on Their Destruction
When Vue component destroyed, it will automatically clean up connections to other instances, it unbundling of all of the instructions and event listeners, but only in the event the component itself.
That is, using addEventListener etc. within js is not self-destruct, we need to listen to manually remove these events when the component is destroyed, so as not to cause a memory leak
created() {
addEventListener('touchmove', this.touchmove, false)
},
beforeDestroy() {
removeEventListener('touchmove', this.touchmove, false)
}
5, and does not require a long list of scene data hijacking
Vue will be hijacked by Object.defineProperty of data to achieve response to changes in data view, but there are times when our component is pure data show, there will be no change, we do not need to hijack our data Vue, a large number of the case of the data presented, it is clear that it can reduce the time component initialization, then how is prohibited Vue hijack our data? By Object.freeze () (freezing) to freeze an object method, once frozen objects can no longer be changed. Or may be Object.seal () (sealing) , in particular the difference between their own to check it
6, lazy loading images
