vue source code analysis of two-way data binding model mvvm

• 1, initDataexecution: by getDatacalling the function vm.$options.datato get data objects option, and do the type of incoming processing, dataand methodpassed in the same name do warning. Priority relationship: propsPriority> methodsPriority> dataPriority

• 2, call the observefunction to dataconvert the data objects responsive to

• 3, observe(data, true /* asRootData */)the data observed conditions were required, in line with the conditions will be monitored

• 4, watch what can monitor data: dependent Object.definePropertyfunction, by which the object function for each attribute a pair of getter / setter so that attribute is read and is set, $watch(render,render)perform the first renderexecution, the trigger getblocker, dependent collection, the second renderwhen dependent changes performed, and changes to the applicationDOM

• 5, Observer(value、dep 、 vmCount、walk 和 observeArray)class takes one parameter, i.e. the data object, the function, the getfunction is mainly completed two important part of the work, a correct attribute value is returned, and the other is dependent collection. setFunction also complete two important things, the first correctly set new values for the attribute, and the second is capable of triggering a respective dependency, responsive to resolve the data inconsistency

• 6, it is determined vm.$options.renderwhether or not true, back into the callHook(vm, 'beforeMount')function, updateComponentfunction to render the generated virtual function DOMrendered into a real DOM, updateComponentas Watcherthe second parameter. WatcherExamples of the observer will updateComponentfunction evaluation, updateComponentexecution of the function indirectly triggers the rendering function ( vm.$options.renderexecution), so that the trigger data attribute getinterceptor function, so that the dependence (observer) to collect, when the data changes will execute the updateComponentfunction, which to complete the re-rendering

• 7, the observer repetitive processing done to avoid repetition, make try, catchhandle to clear the error location

• 8, when the update data occurs, queueWatchera function of the observer will be unified into a queue waiting to perform the update (repeated optimization queues do) after completion of all mutants