What is a responsive
"Responsive" means that when the data changes, the use of code Vue notifies the data. For example, the view used in the rendering data, the data after the change, the view is automatically updated.
Example:
For a template:
<div id="root">{{ name }}</div>
Creating vue components
var vm = new Vue({
el: '#root',
data: {
name: 'luobo'
}
})
After the code is executed, it will display the page luobo
if we want to change the display, just vm.name = 'heidou', without the need to manually update the property.
Two responsive principle
The core principles of responsive vue is the observer pattern.
1.Object.defineProperty方法
Use Object.defineProperty can target each property, set the get and set methods
Object.defineProperty property can set many features, for example configurable, enumerable, but now explain, however, focus only on the get and set
when the property is accessed when triggered the get function, when the property is assigned trigger set function.
2. Depending collection
Each attribute data have declared an array holds who use it.
Page attribute name such as A, B, C it is, then the name A, B, C is stored in the array watch. So that when it changes its interface will depend on notice to be updated. Not just the page, there may be computed and so on, if we do it all with page.
Professional point is two steps:
- the attributes of each data declaration, there will be a unique dependency collector subs
- When the page to use a property, the get function is triggered, then the page watcher will be put in dependence collector subs
3. relies update
When a property changes, use the set method, then the property will traverse their dependence collector, so that they inform the corresponding property page to re-read, and then finished rendering.