vue 源码深入学习分析——史上超详细

let vm = new Vue({
	el: ‘#app‘,
	data: {
		a: 1,
		b: [1, 2, 3]
	}
})

import { initMixin } from ‘./init‘
import { stateMixin } from ‘./state‘
import { renderMixin } from ‘./render‘
import { eventsMixin } from ‘./events‘
import { lifecycleMixin } from ‘./lifecycle‘
import { warn } from ‘../util/index‘
function Vue (options) {
  if (process.env.NODE_ENV !== ‘production‘ &&
    !(this instanceof Vue)) {
    warn(‘Vue is a constructor and should be called with the `new` keyword‘)
  }
  this._init(options)
}
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
export default V

function Vue (options) {
  if (process.env.NODE_ENV !== ‘production‘ &&         // 这个 if 判断，是当你不用new操作符来实例化Vue构造函数时，会爆出警告 
    !(this instanceof Vue)) {
    warn(‘Vue is a constructor and should be called with the `new` keyword‘)
  }
  this._init(options)    // 主要就是这一句，
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

// initMixin(Vue)	src/core/instance/init.js **************************************************
Vue.prototype._init = function (options?: Object) {}
// stateMixin(Vue)	src/core/instance/state.js **************************************************
Vue.prototype.$data
Vue.prototype.$set = set
Vue.prototype.$delete = del
Vue.prototype.$watch = function(){}
// renderMixin(Vue)	src/core/instance/render.js **************************************************
Vue.prototype.$nextTick = function (fn: Function) {}
Vue.prototype._render = function (): VNode {}
Vue.prototype._s = _toString
Vue.prototype._v = createTextVNode
Vue.prototype._n = toNumber
Vue.prototype._e = createEmptyVNode
Vue.prototype._q = looseEqual
Vue.prototype._i = looseIndexOf
Vue.prototype._m = function(){}
Vue.prototype._o = function(){}
Vue.prototype._f = function resolveFilter (id) {}
Vue.prototype._l = function(){}
Vue.prototype._t = function(){}
Vue.prototype._b = function(){}
Vue.prototype._k = function(){}
// eventsMixin(Vue)	src/core/instance/events.js **************************************************
Vue.prototype.$on = function (event: string, fn: Function): Component {}
Vue.prototype.$once = function (event: string, fn: Function): Component {}
Vue.prototype.$off = function (event?: string, fn?: Function): Component {}
Vue.prototype.$emit = function (event: string): Component {}
// lifecycleMixin(Vue)	src/core/instance/lifecycle.js **************************************************
Vue.prototype._mount = function(){}
Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {}
Vue.prototype._updateFromParent = function(){}
Vue.prototype.$forceUpdate = function () {}
Vue.prototype.$destroy = function () {}

export function resolveConstructorOptions (Ctor: Class<Component>) {   //ctor 就是 VUE 构造函数
  let options = Ctor.options           // vue 构造函数身上的 options 属性
  if (Ctor.super) {                     // 判断是否定义了 Vue.super ，这个是用来处理继承的，我们后续再讲
    const superOptions = resolveConstructorOptions(Ctor.super)
    const cachedSuperOptions = Ctor.superOptions
    if (superOptions !== cachedSuperOptions) {
      // super option changed,
      // need to resolve new options.
      Ctor.superOptions = superOptions
      // check if there are any late-modified/attached options (#4976)
      const modifiedOptions = resolveModifiedOptions(Ctor)
      // update base extend options
      if (modifiedOptions) {
        extend(Ctor.extendOptions, modifiedOptions)
      }
      options = Ctor.options = mergeOptions(superOptions, Ctor.extendOptions)
      if (options.name) {
        options.components[options.name] = Ctor
      }
    }
  }
  return options
}

     
   // 这是原来的代码
    vm.$options = mergeOptions(   
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
   
  
 // 实际上传过去的参数是下面这些
     vm.$options = mergeOptions(
 	// Vue.options
   {
    components: {
        KeepAlive,
        Transition,
        TransitionGroup
    },
    directives: {
        model,
        show
    },
    filters: {},
    _base: Vue
},
  // 调用Vue构造函数时传入的参数选项 options
   {
   	el: ‘#app‘,
	data: {
		a: 1,
		b: [1, 2, 3]
	}
   },
   // this
   vm
 ) 

function proxy (vm: Component, key: string) {
  if (!isReserved(key)) {
    Object.defineProperty(vm, key, {             // vm是实例，key是data属性上的属性，
      configurable: true,
      enumerable: true,
      get: function proxyGetter () {
        return vm._data[key]
      },
      set: function proxySetter (val) {
        vm._data[key] = val
      }
    })
  }
}

observe(data)

var O = {}；
Object.definedProperty(o,"name",{
  set:function(){console.log(‘set‘)};   //在获取对象该属性的时候触发，
  get:function(){console.log(‘get‘)};   // 在设置对象该属性的时候触发 ， 并不会真正的设置；因为冲突了value，默认是falue
})

var data = {
    a: 1,
    b: {
        c: 2
    }
}
observer(data)           // 在这里遍历改写了get,set 
new Watch(‘a‘, () => {
    alert(9)
})
new Watch(‘a‘, () => {
    alert(90)
})
new Watch(‘b.c‘, () => {
    alert(80)
})

class Watch {
  constructor (exp, fn) {
    // ……
    data[exp]      // 触发了data 身上的get 方法
 }
}

dep {
  subs: [watcher1,watcher2,watcher3],     // subs 属性是一个数组，用来维护众多订阅器
  addSubs: function(){ this.subs.push( …… ) },  
  notify: function() { 
    for(let i = 0; i< this.subs.length; i++){
         this.subs[i].fn()
      }
   }
}

class Dep {
    constructor () {
        this.subs = []
    }
    addSub () {
        this.subs.push(……)
    }
    notify () {
        for(let i = 0; i < this.subs.length; i++){
            this.subs[i].fn()
        }
    }
}

function defineReactive (data, key, val) {      // 这个函数就是用来重写对象属性的get set 方法
    observer(val)     // 递归的调用从而遍历
    let dep = new Dep()		// 在这里实例化一个dep实例
    Object.defineProperty(data, key, {
        enumerable: true,
        configurable: true,
        get: function () {
            dep.addSub()	       //每当有订阅者订阅，我就新增一个 
            return val
        },
        set: function (newVal) {
            if(val === newVal){
                return
            }
            observer(newVal)
            dep.notify()	  // 新增
        }
    })
}

Dep.target = null   //类似于全局变量的一个东西，用来放 这次实例化的watcher 
function pushTarget(watch){
    Dep.target = watch
}
class Watch {
    constructor (exp, fn) {
        this.exp = exp
        this.fn = fn
        pushTarget(this)   // 让Dep.target赋值为本次实例化的实例
        data[exp]    //紧接着就触发get 方法
    }
}

 get: function () {
            dep.addSub()	       //好吧，我又被触发了一次，
            return val
        },

class Dep {
    constructor () {
        this.subs = []
    }
    addSub () {
        this.subs.push(Dep.target)
    }
    notify () {
        for(let i = 0; i < this.subs.length; i++){
            this.subs[i].fn()
        }
    }
}