Vue nextTick in-depth understanding – Vue performance optimization, DOM update timing, event loop mechanism

I. Definition [nextTick, event loop]

NextTick:
Trigger time of nextTick:
Application Scenarios:
A brief summary of the event loop:
Code in the same event loop completes execution -> DOM update -> nextTick Callback fires
Event loop details:www.cnblogs.com/hity-tt/p/6…

Second, examples to understand the use of nextTick, and give the page rendering optimization clever use

(Tips: Correct way to read code: look at template composition, skip script code, look at use case design behind the code, look at code analysis behind the code, and look back at script code to understand)

<template> <div> <ul> <li v-for="item in list1">{{item}}</li> </ul> <ul> <li v-for="item in list2">{{item}}</li> </ul> <ol> <li v-for="item in list3">{{item}}</li> </ol> <ol> <li v-for="item in list4">{{item}}</li> </ol> <ol> <li v-for="item in list5">{{item}}</li> </ol> </div> </template> <script type="text/javascript"> export default { data() { return { list1: [], list2: [], list3: [], list4: [], list5: []}}, Created () {this.poselist12 () this.poselist34 () this.poselist5 () this.nexttick (function() {// DOM updated console.log('finished test ' + new Date().toString()) console.log(document.querySelectorAll('li').length) }) }, methods: { composeList12() { let me = this let count = 10000 for (let i = 0; i < count; i++) { Vue.set(me.list1, i, Log ('finished list1 '+ new Date().toString()) for (let I = 0; i < count; i++) { Vue.set(me.list2, i, Log ('finished list2 '+ new Date().toString()) this.$nextTick(function() {// DOM updated console.log('finished tick1&2 ' + new Date().toString()) console.log(document.querySelectorAll('li').length) }) }, composeList34() { let me = this let count = 10000 for (let i = 0; i < count; i++) { Vue.set(me.list3, i, Log ('finished list3 '+ new Date().toString()) this.$nextTick(function() {// DOM updated console.log('finished tick3 ' + new Date().toString()) console.log(document.querySelectorAll('li').length) }) setTimeout(me.setTimeout1, 0) }, setTimeout1() { let me = this let count = 10000 for (let i = 0; i < count; i++) { Vue.set(me.list4, i, Log ('finished List4 '+ new Date().toString()) me.$nextTick(function() {// DOM updated console.log('finished tick4 ' + new Date().toString()) console.log(document.querySelectorAll('li').length) }) }, ComposeList5 () {let me = this let count = 10000 this.$nextTick(function() {// DOM updates console.log('finished tick5-1 ') + new Date().toString()) console.log(document.querySelectorAll('li').length) }) setTimeout(me.setTimeout2, 0) }, setTimeout2() { let me = this let count = 10000 for (let i = 0; i < count; i++) { Vue.set(me.list5, i, Log ('finished List5 '+ new Date().toString()) me.$nextTick(function() {// DOM updated console.log('finished tick5 ' + new Date().toString()) console.log(document.querySelectorAll('li').length) }) } } }

</script>

Copy the code

2.1 use case design
2.2. Code analysis
2.3. Infer the output message
2.4. The actual running results are shown below

2.5,
MutationObserver
Event loop and task queuewww.cnblogs.com/hity-tt/p/6…