new Vue({})的时候做了什么？

我正在参加「掘金·启航计划」

1、new Vue()

根据前一篇文章中的import vue，我们可以看到Vue是一个构造函数

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)
}

这里在new的时候，会调佣__init函数，并传入options

根据1中的初始化的时候，是在initMixin中挂载__init方法的

\

2、instance/init 文件

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)
    }

    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }

首选看到传入options有没有_isComponent，没有的话则会合并options到$options属性上；

之后就是一列的初始化，生命周期，事件中心，render函数，state初始化。

为什么在组件内可以用this.的方式获取data函数返回的数据?

我们先来看一下初始化state

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则初始化props，如果有methos则初始化methods，如果有data则初始化data，没有data的话，则认为是根节点

我们再进入initData中查看详细

3、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值赋值给私有变量_data,判断data是不是函数，如果是函数，则用call改变this指向；

然后会对data中定义的变量进行校验，不能和method和props中 定义的一样。

最后的话如果变量是唯一的，则用proxy代理这个_data对象。

const sharedPropertyDefinition = {
  enumerable: true,
  configurable: true,
  get: noop,
  set: noop,
}

export function proxy(target: Object, sourceKey: string, key: string) {
  sharedPropertyDefinition.get = function proxyGetter() {
    return this[sourceKey][key]
  }
  sharedPropertyDefinition.set = function proxySetter(val) {
    this[sourceKey][key] = val
  }
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

对_data对象做了代理，则访问key的时候，就会去_data对象中去获取，而_data是在vm上，也就是当前的component，这就是为什么可以用this来访问data中的数据。

4、总结

（1）new Vue做了哪些事情？

1. 1. 首先是调用init(options)方法
   2. 把传入的options合并到$options上
   3. 初始化生命周期，事件中心，render函数，state初始化

(2) 如何实现在组件内使用this获取data函数返回的数据?

1. 1. 首先判断data是不是一个函数，如果是则用call重新绑定当前组件，并赋值给vm._data
   2. 对data定义的字段和props，method里定义的变量进行比较，不能定义相同
   3. 使用Object.defineProperty对_data变量进行代理