Vue response principles and vue Response Details

Vue response principles and vue Response Details

One of the notable features of the Vue mouth is the reactivity system. The model is just a common JavaScript Object, and the view is updated when it is modified ).

Underlying details of a Vue responsive system

How to track changes

Transmits a common JavaScript Object to the data Option of the Vue instance. The Vue traverses all attributes of the Object and uses the Object. defineProperty converts all these attributes to getter/setter. object. defineProperty is only supported by ES5 and cannot be used by shim. That is why Vue does not support IE8 or earlier browsers.

The user does not see getter/setter, but internally they have the Vue trace dependencies and notify the changes when the attributes are accessed and modified. Note that the getter and setter formats are different when the browser console prints Data Objects. Therefore, you may need to install vue-devtools to obtain more friendly check interfaces.

Each component instance has a corresponding watcher instance object, which records attributes as dependencies during component rendering. Then, when the setter of the dependent item is called, watcher is called to re-calculate it, so that its associated components can be updated.

Change Detection Problems

Due to the limitations of modern JavaScript, Vue cannot detect the addition and deletion of object attributes. Because the Vue will execute the getter/setter conversion process on the attribute when initializing the instance, the attribute must exist on the data object before the Vue can be converted to it. For example:

Var vm = nrew Vue ({el: '# app', data: {a: 1}); // vm. a is the response vm. B = 3; // vm. B is non-responsive

Vue does not allow you to dynamically Add a new root-level responsive property (root-lever reactive property) to an instance ). however, it can use Vue. set (object, key, value) Method

Add the response property to the nested object:

Vue.set(object.someObject,'b',2);

You can use the vm. $ set instance method, which is also the alias of the global Vue. set Method:

this.$set(this.someObject,'b',2)

Sometimes you want to add some attributes to an existing Object, such as using the Object. assign () or _. extend () method to add attributes. However, an update is not triggered when a new attribute is added to an object. In this case, a new object can be seen to include the attributes and new attributes of the object:

// Replace 'object. assign (this. someObject, {a: 1, B: 2}) 'This. someObject = Object. assign ({}, this. someObject, {a: 1, B: 2 });

Declare responsive attributes

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

Var vm = new Vue ({data: {// declare message as a Null String message: ''}, template: '<div >{{ message }}</div>'}) // set 'message' vm. message = 'Hello! '

If no message is declared in the data Option, Vue will warn you that the attribute accessed by the rendering function in the view does not exist.

There are technical reasons behind this restriction. It eliminates a kind of boundary condition in the dependency tracking system, it also makes Vue instances run more efficiently with the help of the type check system. There is also an important consideration in code maintainability: The data object is like a Summary of the component status, and all the response attributes are declared in advance, it makes the component code easier to understand when you re-read it later or other developers read it.

Asynchronous update queue

The Vue executes DOM update asynchronously. Once the data changes are observed, Vue starts a queue and caches all data changes in the same event loop. If a watcher is triggered multiple times, it is pushed to the queue only once. This removal of duplicate data during buffering is very important to avoid unnecessary computation and DOM operations. Then, in the next event loop 'tick', Vue refreshes the queue and performs the actual work. Vue internally tries to use native Promise. then and MutationObserver for asynchronous queues. If the execution environment is not supported, it will use setTimeout (fn, 0) instead.

For example, if you set vm. someData = 'new value', this component will not be re-rendered immediately. When the queue is refreshed, the component will update the next 'tick' when the event loop queue is cleared. In most cases, we do not need to care about this process, but it may be tricky if you want to do something after the DOM status update. Although Vue. js usually encourages developers to think about it in a 'data-driven 'way to avoid getting in touch with DOM directly, sometimes we do. To wait for the Vue to complete DOM update after the data changes, you can use Vue. nextTick (callback) immediately after the data changes. In this way, the callback function is called after the DOM update is complete. For example:

<div id="example">{{message}}</div>

Var vm = new Vue ({el: '# example', data: {message: '000000'}) vm. message = 'new message' // change the vm. $ el. textContent = 'new message' // falseVue. nextTick (function () {vm. $ el. textContent = 'new message' // true })

Using the vm. $ nextTick () instance method in a component is especially convenient, because it does not require global Vue, and this in the callback function will be automatically bound to the current Vue instance:

Vue. component ('example ', {template:' <span >{{ message }}</span> ', data: function () {return {message: 'Not updated' }}, methods: {updateMessage: function () {this. message = 'updated' console. log (this. $ el. textContent) // => 'No Update' this. $ nextTick (function () {console. log (this. $ el. textContent) // => 'Update completed '})}}})

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.