一个小白的进阶之路，努力成为大牛的途中,奥利给。(参照一些小册 一些视频)

我坚信明天会更好

数据驱动

new Vue发生了什么

首先是Vue构造器

  //做一个限制,只有new关键字 才能初始化vue实例
  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 Vue 
复制代码

先是对Vue的调用做了一个限制,通过instanceof 判断this所指向的对象是否是Vue的实例(其实就是限制只能通过new指令调用)

if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
复制代码

然后是调用_init函数 传递过去一个options 其实就是 创建一个Vue实例时传递过去的参数对象.
_init方法在initMixin(Vue)时初始化挂载到Vue构造器的原型上

xport function initMixin (Vue: Class<Component>) {
  // _init的作用:合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等等合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、      //  watcher 等等合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等等合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、    //watcher 等等
  Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    // a uid
    vm._uid = uid++


    let startTag, endTag
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      startTag = `vue-perf-start:${vm._uid}`
      endTag = `vue-perf-end:${vm._uid}`
      mark(startTag)
    }


    // a flag to avoid this being observed
    vm._isVue = true
    // merge options
    //参数合并
    if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initInternalComponent(vm, options)
    } else {


      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // expose real self
    vm._self = vm
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')


    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      vm._name = formatComponentName(vm, false)
      mark(endTag)
      measure(`vue ${vm._name} init`, startTag, endTag)
    }
   /**
    * 针对runtime+compiler 写 el和template
    * runtimeOnly render+mount
    */
   //重点
    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }
}


复制代码

代理

new Vue({
  data() {
    return {
      msg:2
    }
  },
  mounted() {
    console.log(this.msg);//2
  }
});
复制代码

你肯定会好奇 为什么为什么通过this.msg能访问到data里面的msg的值 其实是data里面定义的数据挂载到了Vue实例上

_init函数执行时会初始化一系列东西 包括生命钩子等

initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
复制代码

data里面定义的数据挂载到了Vue实例上就是在initState函数中实现的

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}
复制代码

如果有props就会调用initProps 有methods就会调用 initMethods 有data就会调用initData 我们这里主要看initData函数

function initData (vm: Component) {
  let data = vm.$options.data
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {}
    
  if (!isPlainObject(data)) {
    data = {}
    process.env.NODE_ENV !== 'production' && warn(
      'data functions should return an object:\n' +
      'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
      vm
    )
  }
  // proxy data on instance
  const keys = Object.keys(data)
  const props = vm.$options.props
  const methods = vm.$options.methods
  let i = keys.length
  while (i--) {
   
    const key = keys[i]
    if (process.env.NODE_ENV !== 'production') {
      if (methods && hasOwn(methods, key)) {
        warn(
          `Method "${key}" has already been defined as a data property.`,
          vm
        )
      }
    }
    if (props && hasOwn(props, key)) {
      process.env.NODE_ENV !== 'production' && warn(
        `The data property "${key}" is already declared as a prop. ` +
        `Use prop default value instead.`,
        vm
      )
    } else if (!isReserved(key)) {
      proxy(vm, `_data`, key)
    }
  }
  // observe data
  observe(data, true /* asRootData */)
}
复制代码

首先会判断data是一个函数还是一个对象 如果是函数就会调用getData 如果不是函数 就会判断data是否有值 有值则会返回该data 如果没有值 则默认为空对象

let data = vm.$options.data
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {}
复制代码

getData内部其实就是对data函数显示绑定调用 然后把函数返回值返回

export function getData (data: Function, vm: Component): any {
  // #7573 disable dep collection when invoking data getters
  pushTarget()
  try {
    return data.call(vm, vm)
  } catch (e) {
    handleError(e, vm, `data()`)
    return {}
  } finally {
    popTarget()
  }
}
复制代码

之后会通过Object.keys获取data对象的属名 然后遍历数组 判断data的属性名是否与props和methods里面的key相同 如果相同 则会发错一个警告 所以data里面定义的key不能与props和methods里面的key相同 然后 调用proxy -> proxy(vm, _data, key) PS:_data主要是在之前执行了 this._data = data 所以指向一个对象

// proxy data on instance
  const keys = Object.keys(data)
  const props = vm.$options.props
  const methods = vm.$options.methods
  let i = keys.length
  while (i--) {
   
    const key = keys[i]
    if (process.env.NODE_ENV !== 'production') {
      if (methods && hasOwn(methods, key)) {
        warn(
          `Method "${key}" has already been defined as a data property.`,
          vm
        )
      }
    }
    if (props && hasOwn(props, key)) {
      process.env.NODE_ENV !== 'production' && warn(
        `The data property "${key}" is already declared as a prop. ` +
        `Use prop default value instead.`,
        vm
      )
    } else if (!isReserved(key)) {
      proxy(vm, `_data`, key)
    }
  }
  // observe data
  observe(data, true /* asRootData */)
}
复制代码

Vue3.0与Vue2.x

proxy与Object.defineProperty

Object.definedProperty

• 1.不能监听数组变化,数组的一些方法被Vue重写了.
  
• 2.不能监听对象本身,而是监听对象属性,不能对原来不存在对象上的属性进行监听.
  

Proxy

• 1.可以监听数组变化
  
• 2.监听的是对象本身