Vue source code analysis (1)-initialization

1. Data

1. Recursively traverse the dataconfiguration and responsively process each attribute
2. Responsive processing is to define an depinstance for this attribute and carry out data hijacking. getterPerform dependency collection and setterdistribute updates
3. The component rendercreation vnodeprocess acquires data and triggers getterdependency collection
4. Subsequent modification of the value triggers the setterdistribution update, and finally triggers the page update

2. Props

1. Format the configuration, unified format to facilitate subsequent operations
2. For each propverify, processed and evaluated responsive
3. The modified value of the parent component triggers the parent component page update, and the updateprocess assigns the new value to the child component and propsfinally triggers the child component page update

The essence of props is a data, but the responsive trigger is passed from the parent component to the child component.

3. Computed

1. Traverse the computedconfiguration, define one for each item watcherand perform data hijacking processing
2. getterThe function will first determine whether the current calculated attribute requires a value, and then trigger the evaluation if necessary, without returning directly
3. When relying on collection, the dependent collection of the calculated attribute datawill be the first watcherdependent collection of the calculated attribute, and then the dependent collection of the calculated attribute watcherwill trigger the dependent collection dataof the renderingwatcher
4. When modifying the dependency data, first trigger the update of the calculated attribute, that is, reset the parameter that requires a value. Then trigger the page update, the update process will evaluate the calculated attribute again and rely on the collection

The nature of the calculated attribute is a watcher with data hijacking function. The update process only resets the parameters and evaluates only after the getter is triggered.

4. Watch

1. Traverse the watcherconfiguration, parse out the handlercallback and monitoring path of each item , and define onewatcher
2. This watcheris evaluated once in the initialization phase , and dependency collection is performed
3. When the monitoring value is modified, the dispatch update is triggered, the evaluation process is executed again for dependency collection, and finally the handlercallback is called

The Watch attribute is essentially a Watcher, which performs dependency collection and executes callbacks

5. v-model

1. The v-modelinstructions are parsed in the compilation phase , and finally decomposed into propsattributes, inputevents, and modelinstructions
2. The hook that is executed after the binding is updatecreated in the component process . According to the property addition, event bindingv-modeldomdomcreatevnodedom
3. After modifying the inputvalue, it will trigger the inputevent generated in the compilation stage , assign the value to the propsattribute, and finally trigger the responsive process