Why do dom changes caused by data updates in vue use asynchronous updates? doesn't Synchronize code operate the dom browser and render together in the last stage of eventloop?

Why do dom changes caused by data updates in vue use asynchronous updates? doesn"t Synchronize code operate the dom browser and render together in the last stage of eventloop?
this is the decomposition of the problem

Vue.js node.js javascript
Mar.25,2022

you set the height to a dom, and then get the height, what the browser will do

vue uses asynchronous updates, which is essentially an update optimization for virtual dom.
the essence of virtual dom is to use Javascript objects to simulate dom trees. If you synchronize multiple updates, and if each update of data data has a great impact on this object, it is bound to bring unnecessary redundant computation. As long as the last update is not good ~ 

export default {
    data () {
        return {
            test: 0
        };
    },
    mounted () {
      for(let i = 0; i < 1000; iPP) {
        this.testPP;
      }
    }
}

now there is a situation where the value of test is executed 1000 times by PP loop when mounted. Each time PP, setter- > Dep- > Watcher- > update- > patch is triggered according to the response. If the view is not updated asynchronously at this time, then every time PP will directly manipulate DOM to update the view, which is very performance-consuming. So Vue.js implements a queue queue, which uniformly executes the run of the Watcher in the queue at the next tick. At the same time, Watcher with the same id will not be added to the queue repeatedly, so the run of Watcher will not be executed 1000 times. In the end, updating the view will only directly change the 0 of the DOM corresponding to test to 1000. The action to ensure that the update view operation DOM is called on the next tick after the current stack has finished execution greatly optimizes performance.
original address: https://github.com/answershut...

Previous: Questions about the es6 generator

Next: How to set the FontSmoothing? of CSS by canvas

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu