vue2.x源码解析五——数据驱动--2.new Vue发生了什么

1.实现小小的例子

我们使用vue-vli创建基于Runtime+Compiler的vue脚手架

<div id="app">
  <p>{{message}}</p>
</div>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      message: '这是vue实例'
    }
  })
</script>

2. 探究根源

我们由上一节vue的入口文件，知道了

2.1 入口文件src/core/instance/index.js：

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关键词创建，然后调用了this._init(options)。

2.2 _init函数是在src/core/instance/init.js ：

Vue 初始化主要就干了几件事情，合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等等。

 Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    // a uid
    vm._uid = uid++

    let startTag, endTag
    // 性能统计相关
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      startTag = `vue-perf-init:${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) {
      // 内部使用Vnode部分使用
      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')

    // 性能相关
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      vm._name = formatComponentName(vm, false)
      mark(endTag)
      measure(`${vm._name} init`, startTag, endTag)
    }

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

2.2.1 详解：

1.首先一进来，我们给当前vm(vue实例)添加了一个唯一的_uid，然后vm._isVue设为true（监听对象变化时用于过滤vm）。

2.合并 options

 if (options && options._isComponent) {
      // 内部使用Vnode部分使用
      initInternalComponent(vm, options)
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }

因为options._isComponent只有组件的时候才会是true，所以进到else中

对于options的操作，就是将我们传入的options merage到 vm.$options上
例如：

 var vm = new Vue({
    el: '#app',
    data: {
      message: '这是vue实例'
    }
  })

那么： vm.$options.el 就是 ‘#app’

3.一些初始化函数

//主要就是给vm对象添加了$parent、$root、$children属性，以及一些其它的生命周期相关的标识。    
 initLifecycle(vm)
// 初始化事件相关的属性
 initEvents(vm)
// vm添加了一些虚拟dom、slot等相关的属性和方法
 initRender(vm)
 callHook(vm, 'beforeCreate')
//下面两个配套使用，用于将父组件_provided中定义的值，通过inject注入到子组件，且这些属性不会被观察
 initInjections(vm) // resolve injections before data/props
 initProvide(vm) // resolve provide after data/props
 //主要就是操作数据了，props、methods、data、computed、watch，从这里开始就涉及到了Observer、Dep和Watcher
 initState(vm)

4.挂载
在初始化的最后，检测到如果有 el 属性，则调用 vm.$mount 方法挂载 vm，挂载的目标就是把模板渲染成最终的 DOM

扫描二维码关注公众号，回复： 1889103 查看本文章

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

3.为何能全局访问this.message

 var vm = new Vue({
    el: '#app',
    data: {
      message: '这是vue实例'
    },
    mounted() {
        console.log(this.message)
    }
  })

mounted中为何可以访问到this.message？

我们来带初始化vue时调用的 initState(vm)，也就是src/core/instance/state.js

3.1. 初始化 initState函数

我们可以看到根据vm（实例）中参数的不同，调用不通的函数，我们主要看opts.data调用的 initData(vm)

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) initWatch(vm, opts.watch)
}

3.2.initData(vm)

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

详解：

1.判断这个vm.$options.data也就是实例的data是不是函数，

 data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {}

因为Vue推荐的data写法为：

 var vm = new Vue({
    el: '#app',
    data(){
      return() {
          message: '这是vue实例'
      }
    },
  })

2.接着会调用getData方法

其实很简单，就是将data call在这个实例上，并返回该对象

export function getData (data: Function, vm: Component): any {
  pushTarget()
  try {
    return data.call(vm, vm)
  } catch (e) {
    handleError(e, vm, `data()`)
    return {}
  } finally {
    popTarget()
  }
}

将getData方法返回的对象赋值给 vm._data

3.如果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
    )
  }

4.命名不能重复

  const keys = Object.keys(data)
  const props = vm.$options.props
  const methods = vm.$options.methods
  let i = keys.length
  while (i--) {。。。。}

就是将data中值得key与props还有methods中的值得key进行对比，有重复的就会报错，那是因为这些key都会赋给vm（实例）

5.将变量赋给vm

 proxy(vm, `_data`, key)

proxy是当前js的proxy函数，就是一层代理

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

当我们访问vm[key] 就会去访问vm[sourceKey][key] ，vm._data[key]也就是说vm.message 就会去访问vm._data.message也就是vm.data.message

所以
this.message就是this._dara.message，只不过_dara是vue内部使用的

 var vm = new Vue({
    el: '#app',
    data: {
      message: '这是vue实例'
    },
    mounted() {
        console.log(this.message)；
        console.log(this._dara.message)；
    }
  })