One of the most unique properties Vue, which is non-invasive response systems .
Responsive principle: data change, change page
How Vue track changes
When an ordinary JS objects passed in Vue as examples of data option, Vue will go through all of the properties of this object, and use Object.defineProperty put all of these attributes into getter / setter. Object.defineProperty is not ES5 a shim characteristic, which is the reason Vue does not support IE8 and earlier versions of the browser.
Object.defineProperty (obj, prop, descriptor)
// descriptor There are two main forms: the data access descriptor and the descriptor, the descriptor must be one of two forms, not both
// data descriptor
descriptor: {
Configurable: false, // defaults to false, indicating not configurable
enumarable: false, // defaults to false, indicating not enumerated
value: undefined, // the attribute value corresponding to the
writable: false // defaults to false, indicating not write
}
// access descriptor
descriptor: {
Configurable: to false, // supra
enumerable: false, // above
methods get () {}, // a getter provided to the property if there is no getter wasundefined
set () {} // a provided to setter property method, if no setter was }undefined
These getter / setter is not visible to the user, but internally they let Vue able to track dependencies notice the change in the property is accessed and modified.
Each instance corresponds to a watcher component instance, it the 'contacts' in the rendering process component over-dependency is recorded as attribute data. When the dependency after the setter / getter trigger, will inform watcher, so that it re-render the associated components.
Detect changes
Modern restricted JS (and Object.observe ---- for monitoring a change asynchronously object. When an object attribute is modified, the method provides a callback function to modify the ordered stream has been abandoned), Vue unable to detect the object properties added or deleted. So attributes must be present in order for the data subject Vue convert it to a type of response.
For instance has been created, Vue allowed to dynamically add the root level of responsive property . However, by using, Vue.set (Object, propertyName, value) method was added to the nested objects responsive properties, is used internally object.defineProperty.
Vue.set(vm.someObject, 'b', 2)
You can also use vm $ set. Instance method, which is also a global Vue.set alias method:
this.$set(this.someObject, 'b', 2)
Sometimes there may need to assign an object a number of new properties, such as using Object.assign () or _.extend (), however, this new property is added to the object will not be updated. In this case, you can make a new attribute points to the original object have to create a new object in the property to be mixed in with the object.
this.someObject = Object.assign({}, this.someObject, {a: 1, b: 2})
Statement responsive property
Since the Vue is not allowed to dynamically add the root-level responsive property, so you must initialize an instance before the root level responsive to declare all property, even if only a null value; if the message is not declared in data options, Vue will warn rendering function is trying to access is not existing property.
Such limitations are behind technical reasons, it eliminates a case where the type of boundary dependency tracking system, also better with Example Vue type inspection system work. At the same time code maintainability also has one important consideration: data the object as a structural component state (schema). All statements in advance of the responsive property, allowing the component code easier to understand in the future to other developers to modify or read.
Asynchronous update queue
Vue in the DOM is updated asynchronously executed. As long as the listener to change the data, Vue will open a queue and buffer all data changes occur in the same event loop. If multiple triggers the same watcher, it pushed into the queue only once. This deduplication data in the buffer to avoid unnecessary computation and DOM operations are very important.
Then, at the next event loop 'tick' in, Vue refresh queue and performs the actual (already deduplicated) work. Vue try to use native asynchronous queue inside Promise.then , MutationObserver and setImmediate , if the execution environment does not support, it will use setTimeout (fn, 0) in place.
Because an event loop 'tick' will be in the next update components. So if you want a state based on the updated DOM to do something, it will be tricky. To this end, Vue offers nextTick, in order to wait Vue change after the data update is complete DOM, you can use immediately Vue.nextTick (callback) after the data changes. So the callback function will be called after the update is complete DOM.
An analog implementation responsive
dom structure:
<!-- DOM结构 --> <div id="test"> </div> <button onclick="change()">change</button>
js code:
Change function () {
data.age = 999
}
the let Data = {
}
the let Age = 2
the let = document.getElementById Test ( "Test")
test.innerHTML = Age
Object.defineProperty (Data, 'Age', {
GET () {
return Age
},
SET (the params) {
Age = the params
wathcer ()
}
})
// binding watcher listening
function wathcer () {
after // change trigger data, the diff performed, determining whether the modification should DOM
renderDom ()
}
/ / re-rendering DOM
function renderDom (H) {
the let = document.getElementById Test ( "Test")
the let Age = data.age
test.innerHTML = Age
}