In-depth Vue's responsive principle

In the process of work, sometimes there will be data changes but the view does not update the problem, the author in Vue's Official document mentioned this question, I would summarize

Each component instance of 1.vue has an object's Watcher instance object, which records the property as a dependency during component rendering, and when the dependency setter method is called, notifies the Watcher object to recalculate, so that its associated component updates

To detect changes in the note,Vue cannot detect the addition or deletion of an object property , because Vue performs the conversion process on the property when the instance is initialized getter/setter , so the attribute must exist on the data object for Vue to convert it . So that it can be responded to.

2.Vue does not allow the dynamic addition of new root-level response properties (Root-level reactive property) on instances that have already been created. However, it can use Vue.set(object, key, value) methods to add a response property to a nested object:

Vue.set (Vm.someobject, ' B ', 2)//  or this. $set (this. Someobject, ' B ', 2)

Sometimes you want to add more than one property to an existing object, such as a use Object.assign() or a _.extend() method to add a property. However, this new property added to the object does not trigger the update. In this case, you can create a new object that contains the properties of the original object and the new properties:

// instead of ' object.assign (This.someobject, {a:1, b:2}) ' this. Someobject = this  . Someobject, {a:1, b:2})

3. Declaring the Response property

Because Vue does not allow dynamic addition of root-level response attributes, you must declare the root-level response attribute before initializing the instance, even if it is a null value:

var New Vue ({  data: {    //  Declaration message is a null-value string    message: '  },  ' < div>{{message}}</div> '})//  after setting ' message 'vm.message = ' hello! '

If you do not declare in the data option message ,Vue warns you that the property that the render function is attempting to access does not exist.

There are technical reasons behind this limitation, which eliminates a class of boundary conditions in the dependency tracking system and makes the Vue instance more efficient to run with the help of a type-checking system. And there's one important consideration in code maintainability: data The object is like a summary of the state of the component, declaring all of the responsive properties in advance, making it easier to understand the component code later or read by other developers.

4. Asynchronous update queue (key understanding)

Vue executes DOM updates asynchronously. As soon as the data changes are observed, 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. This removal of duplicate data during buffering is important to avoid unnecessary calculations and DOM operations. Then, in the next event loop "tick", Vue flushes the queue and performs the actual (heavy) work. Vue attempts to use the native and the asynchronous queue internally Promise.then and MessageChannel , if the execution environment is not supported, takes the setTimeout(fn, 0) place of

When you set vm.someData = ‘new value‘ it, the component is not immediately re-rendered. When the queue is refreshed, the component will update the next "tick" when the event loop queue is emptied. In most cases we don't need to care about this process, but if you want to do something after the DOM state is updated, this can be tricky. While Vue.js often encourages developers to think in a "data-driven" way, avoiding direct contact with the DOM, sometimes we do. To wait for the Vue to finish updating the DOM after the data changes, you can use it immediately after the data changes Vue.nextTick(callback) . This callback function is called after the DOM update is complete. For example:

var New Vue ({  ' #example ', data  : {    ' 123 '  //  change //   falseVue.nexttick (function  () {  //  true})

In-depth Vue's responsive principle