Asynchronous update queue

Dom updates in VUE are performed asynchronously, and as long as you listen for data changes, vUE opens a queue and buffers all data changes that occur in the same event loop. If the same watcher is triggered more than once, it will only be pushed into the queue once. (Buffered, buffered, and then put the last of the multiple trigger attributes into the queue as a promise; Instead of putting it in a queue)

The data in vUE is updated to DOM asynchronously. The asynchronous update of data can be understood as a promise microtask. And when multiple assignments are made to the same attribute value, only the last assignment is placed on the update queue as a Promise microtask. Specific code:

Conclusion of Scenario 1: DOM updates asynchronously, which is equivalent to a Promise microtask

// Scenario 1:<div id="example">{{message}}</div>
<script>
  var vm = new Vue({
    el: '#example'.data: {
      message: '123'}})// When you encounter this sentence, interpret it as a promise and put it in the promise queue
  vm.message = 'new message' // Change the data

  Promise.resolve(100).then(value= > {
    console.log("If the assignment above was equivalent to a promise, the output would be New Message.", vm.$el.textContent);		// Step 2 output: new message
  })
  console.log(vm.$el.textContent);	// First step output: 123
</script>

Copy the code

Scenario 2 Conclusion: Assignment changes the response property as a promise and executes in the same order as a normal promise queue

// Example 1:
var vm = new Vue({
  el: '#example'.data: {
    message: '123'
  }
})

vm.message = 'new' // Change the data

Promise.resolve(100).then(value= > {
  console.log("Test first assignment", vm.$el.textContent);		Vm. message = 'new' is put in the promise queue first, so the output of this line is changed to new.
})
console.log(vm.$el.textContent);		// First step output: 123




// Example 2:
var vm = new Vue({
  el: '#example'.data: {
    message: '123'}})Promise.resolve(100).then(value= > {
  console.log("Test first assignment", vm.$el.textContent);		The promise vm. Message = 'new' has not been executed yet, so the output is still 123.
})

vm.message = 'new' // Change the data
console.log(vm.$el.textContent);		// First step output: 123
Copy the code

Scenario 3 Conclusion: Scenario 3 illustrates the execution sequence of asynchronous updates and the principles summarized below

// Example 1:<div id="example">{{message}}</div>
<script>
  var vm = new Vue({
    el: '#example'.data: {
      message: '123'
    }
  })

  vm.message = 'msg' // Change the data

  Promise.resolve(100).then(value= > {
    console.log("Test first assignment", vm.$el.textContent);		// Step 2 output: new
  })

  vm.message = 'new' // Change the data
  console.log("= =", vm.$el.textContent);		// Step 1 123

  Promise.resolve(100).then(value= > {
    console.log("Test the second assignment", vm.$el.textContent);		// Step 3 output: new
  })
</script>// Example 2:<div id="example">{{message}}</div>
<script>
  var vm = new Vue({
    el: '#example'.data: {
      message: '123'}})Promise.resolve(1).then(value= > {
    console.log("xxx", vm.$el.textContent);		// Step 2 output: 123
  })

  vm.message = 'msg' // Change the data

  Promise.resolve(2).then(value= > {
    console.log("Test", vm.$el.textContent);  // Step 3 output: new
  })

  vm.message = 'new' // Change the data

  Promise.resolve(3).then(value= > {
    console.log("fff", vm.$el.textContent);			// Step 4 output: new
  })
  
  console.log(vm.$el.textContent);			// First step output: 123
</script>// Conclusion: Examples 1 and 2 in scenario 3 illustrate the vUE asynchronous update principle. Using example 2 of scenario 3, the flow is briefly described: The main process executes the code when it encounters THE promise1, places the promise1 first in the microtask queue, then the main process continues to execute the synchronization code when it encounters vm.message = 'MSG' and places the vm.message = 'MSG' as a promise in the task queue second. The main thread continues to execute the synchronization code and finds promise2, puts promise2 in the third bit of the microtask queue, and hits Vm. message = 'new'. If vm. Message = 'new' is already in the buffer, then the main thread continues to execute the synchronization code and encounters the promise3, Place promise3 on the fourth bit of the microtask queue, and the main thread continues to execute the synchronization code and hits console.log(vm.$el.textContent); If the command is executed directly, 123 is displayed in the first step. Vm. message = 'MSG'; vm.message = 'new'; vm.message = 'MSG'; vm.message = 'new'; The first task "promise1" (" xxx123 ") and the second task "vm.message = 'new'" are rendered and updated to the dom node of div#example. The third task, promise2, outputs a test new (because the previous task has updated new to the DOM node). The fourth task promise3 outputs FFF new. The main point to note is that VUE will queue the asynchronous task updating data according to the synchronous code execution of the main thread normally, but will cache the attributes in the buffer. If the synchronization code is encountered again, the attribute value of the buffer will be updated, but will not queue as a task when it is encountered again. Finally, when the synchronous code is finished, the final value of the buffer is updated to the asynchronous data update task in the microtask queue, and the microtask queue starts to execute from beginning to end. Finally, a successful conclusion.Copy the code