How do you understand the Vue responsive system

1. Responsive System Description:
Any instance of a Watcher Vue Component has a corresponding thereto.
Vue property on the data will be added getter and setter properties.
When Vue Component render function is executed, the data will be touch (Touch), i.e. reading, getters method is invoked, then you will go to record all data Vue Vue Component this depends. (This process is called dependency collected)
when the data has been altered (mainly user operation), ie writing, setter method is called, this time to inform all the components Vue will rely on this data to invoke their render function updated.

2. Since the Vue hijacked by data can accurately detect data changes, why do we need the DOM virtual diff detect a difference?
Test sites: Vue change detection principle of
pre-knowledge: dependent on the collection, virtual DOM, responsive system

of modern front-end framework, there are two way to detect changes, one is pull one is the Push

pull: its representatives React, we can recall how React change is detected,
we explicitly typically updated with setStateAPI, then React will be a layer of Virtual Dom Diff operation to find out the differences, then Patch on the DOM,
React from the beginning do not know in the end what has changed, just know that "there is a change," and then compare the violence Diff change operation to find "what happened "
Another representative of Angular is dirty check operation.

push: Vue response is representative of systems of push, when Vue initialization data of the data collection will depend,
Once the data changes, the system will know immediately responsive, therefore Vue is a beginning that is "where the change occurred,"
but it will also generate a problem, if you are familiar with Vue response systems will know, usually a bind a data requires a Watcher,
a fine-grained but we are bound too high will generate a lot of Watcher, this will bring the memory overhead and dependency tracking, and fine-grained too low will not be accurate enough to detect changes ,
therefore Vue is designed for medium-grained scheme, carried out a way to detect push at the component level, that is, the set of responsive system, usually we will first detect the components of change,
then the internal components Virtual Dom Diff get more specific differences, and Virtual Dom Diff is a pull operation,
Vue is a push + pull a combination of ways to detect changes in the

3.Vue Why is there no similar React shouldComponentUpdate in the life cycle?
The fundamental reason is to detect changes in Vue and React differently

React is pull way to detect changes, React know when the change occurs, the use of Virtual Dom Diff differences were detected,
but many components are actually certainly not change , this time need to use shouldComponentUpdate be manually operated to reduce the diff, thereby improving overall application performance.

Vue pull + push is a way to detect changes in the beginning that that component has changed, and therefore push the stage no manual control diff,
and the diff way of actually using the internal components can be introduced similar to shouldComponentUpdate related to the life cycle, but usually reasonably sized component does not have an excessive amount of diff, manual optimization of limited value,
So now Vue does not consider the introduction of shouldComponentUpdate this manual optimization of the life cycle