vue的源码学习之五——2.数据驱动（new Vue发生了什么）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qishuixian/article/details/84964567

• 介绍

        版本：2.5.17。

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

      小小的demo

<div id="app">
  <p>{{message}}</p>
</div>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      message: '这是任何地方都可以使用的message'
    }
  })
</script>

• 探究其根源

  从入口代码开始分析，我们先来分析 new Vue 背后发生了哪些事情。我们都知道，new 关键字在 Javascript 语言中代表实例化是一个对象，而 Vue 实际上是一个类，类在 Javascript 中是用 Function 来实现的 

  可以看到 Vue 只能通过 new 关键字初始化，然后会调用 this._init 方法 

  • 入口文件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)
    }

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

    • 详解

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

 vm._uid = uid++

       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上 ，如下面的列子vm.$options.el 就是 ‘#app’

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

           3、一些初始化函数

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

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

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

• 为何能全局访问this.message

  var vm = new Vue({
      el: '#app',
      data: {
        message: 'message可以全局使用'
      },
      mounted() {
          console.log(this.message)
      }
    })

  由于初始化vue时调用的 initState(vm)，也就是src/core/instance/state.js 中的 initState函数，故this.message可以全局使用，原因请往下看

  • 初始化 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)
      }
    }

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

  • 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 {
  // #7573 disable dep collection when invoking data getters
  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.命名不能重复

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

        就是将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: '这是一个全局访问的message'
    },
    mounted() {
        console.log(this.message)；
        console.log(this._dara.message)；
    }
  })

学习文档：https://ustbhuangyi.github.io/vue-analysis/data-driven/new-vue.html