vue Source resolve

 

To achieve the overall process generally shown in FIG Vue

1. First achieve initialization init () method

2. $ mount () to achieve mount

3.compile achieve compilation

4.render function generates virtual rendering dom

5.getter function implementation dependent data collection

7.setter function data updates data changes by the observer watcher

8.patch () patch 

9. Build true dom

Source download and run locally relevant js 

1. move out of the project: git clone https://github.com/vuejs/vue.git

2. npm install depend on implementation-dependent installation

3. npm install -g rollup (global installed rollup rollup package tools for pure js) 

4. Modify dev script file package.json plus sourcemap

"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",

 

5. Run npm run dev happy that we can begin the process of debugging code

Entrance files to find

1./vue-dev/src/platforms/web/entry-runtime-with-compiler.js

 You can see there are achieved Vue.prototype. Coverage of $ mount

 The key code is as follows:

     const mount = Vue.prototype.$mount

     return mount.call(this, el, hydrating)

2./Users/jessica/Desktop/vue-dev/src/platforms/web/runtime/index.js

  We can see the method to achieve $ mount

  

 

3./Users/jessica/Desktop/vue-dev/src/core/index.js

 Global api to achieve the key code initGlobalAPI (Vue)

  

 

4./Users/jessica/Desktop/vue-dev/src/core/global-api/index.js 

  Achieve a global approach to global api junior partner interested can look inside the specific code implementation

   Vue.set = set    implemented method vue.set

   = Del Vue.Delete Vue.Delete way实现

   = NextTick Vue.nextTick vue.nextTick implemented method

   InitUse (Vue)  Vue.Use way实现

   initMixin (Vue) vue.mixin implemented method

   initExtend (Vue) implement extension methods vue.extend

   initAssetRegisters (Vue)  vue.AssetRegisters implemented method

 

5. /Users/jessica/Desktop/vue-dev/src/core/instance/index.js

   Vue achieve the key code to function as you can see related files in a specific code implementation

   

 

6. /Users/jessica/Desktop/vue-dev/src/core/instance/init.js

    Create a component instance, initializes its data, properties, events etc.

initLifecycle(vm)   // $parent,$root,$children,$refs

initEvents (vm) // parent component transfer process listener
initRender (vm) // $ slots, $ scopedSlots, _c, $ createElement callHook (vm, 'beforeCreate')

initInjections (vm) // Get data injection
initState (vm) // initialize props, methods, data, computed, watch

initProvide (vm) // provides data injection
callHook (vm, 'created')

 

7./Users/jessica/Desktop/vue-dev/src/core/instance/lifecycle.js

   mountComponent realize mount

  And implement some of the life-cycle approach

   $forceUpdate

   $destory

8. The data processing responsive

  Vue a major feature data responsive, effect changes in UI data without performing DOM operations. In principle, the use of JS language features Object.defineProperty (), to intercept the object property changes by defining object properties setter methods to convert the value to change the number of UI changes.

  Specific implementation is in the Vue is initialized, calls initState, it will initialize the data, props and so on, here we focus on data initialization,

  Core code of the data response achieved by

 

9. core/observer/index.js  

    observe method returns an instance Observer 

10.core/observer/index.js

     The Observer object getter / setter in response to operation performed defineReactive defined object properties corresponding to the data type, getter responsible for adding dependency, setter responsible for notifying update 

11.core/observer/dep.js

    Dep is responsible for managing a group Watcher, including deletions and notification update watcher instance 

12. Watcher

Watcher analytical expression and collect a dependent, triggering the callback function when the value changes, and commonly used in the $ watch API instructions. Each component will have a corresponding Watcher, will trigger changes in the value of its update function leads to re-render 

export default class Watcher {

   constructor () {}

   get () {}

   addDep (dep: Dep) {}

   update () {}

} 

13. The array of response 

     An array of data to detect changes with different objects that we manipulate arrays typically use push, pop, splice and other methods, there is no way to know at this time the data changes. So vue strategy taken is to intercept these methods and inform dep.   

      src \ core \ observer \ array.js prototype array 7 can change the contents of a method defines interception 

      Observer prototype array covering 

      IF (Array.isArray (value)) {
       // Replace array prototype
          protoAugment (value, arrayMethods) // value .__ proto__ = arrayMethods

          this.observeArray(value)

     }