vue源码分析 - 为什么通过this可以访问到data中的数据

以你之姓@ 2023-07-02 12:27 101阅读 0赞

### 讲data之前，先来看下在new Vue() 时，发生了什么？ ###

当通过 import Vue from ‘vue’方式来引入vue，此时在new 之前 ，Vue的原型上已经挂载了许多初始化的属性及方法，通过

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

当我们new Vue时，会执行以下Vue函数，里边\_init（）方法，是通过initMixin函数定义的，继续往下看：

**( 以下所有代码在开头都会有一个路径 )**

//  src -> core -> instance -> index.js 
    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'
    
    // 初始化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) // 这个方法在Vue原型上定义的
    }
    // 在import Vue from ‘vue’ 时，会执行以下函数
    initMixin(Vue) // 函数执行时，定义了Vue原型上会定义_init 方法
    stateMixin(Vue)
    eventsMixin(Vue)
    lifecycleMixin(Vue)
    renderMixin(Vue)
    
    export default Vue

**initMixin函数：**

在initMixin函数中，Vue原型上定义了\_init 方法，其中的多数代码都去掉了，merge options注释 ，这个是在初始化时会把el / data / props / methods 上边的所有属性都合并到 实例的 **$options** 上去 （ **vm.$options** ），如何合并的会在以后文章中讲到。

继续往下，又会看到一系列初始化的函数, 本篇文章主要介绍下 **initState(vm)**中的 **initData(vm)**

//  src -> core -> instance -> init.js 
    let uid = 0
    export function initMixin (Vue: Class<Component>) {
      Vue.prototype._init = function (options?: Object) {
        const vm: Component = this
        // a uid
        ··· ···
        // a flag to avoid this being observed
        ··· ···
        // merge options
        ··· ···
        // expose real self
        vm._self = vm
        initLifecycle(vm) // 初始化钩子函数
        initEvents(vm) // 事件
        initRender(vm) // render函数
        callHook(vm, 'beforeCreate')
        initInjections(vm) // resolve injections before data/props
        initState(vm) // 为data中的数据添加getter setter，及数据的响应式/监听
        initProvide(vm) // resolve provide after data/props
        callHook(vm, 'created')
    
        /* istanbul ignore if */
        ··· ···
        if (vm.$options.el) {
          vm.$mount(vm.$options.el)
        }
      }
    }

**initState函数：**

在initState函数中，分别初始化了props / methods / data , 以及监听data中的数据， 我们来看下 initData( vm )函数：

//  src -> core -> instance -> state.js 
    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)
      }
    }

**initData函数：**

**真正的data初始化是这个函数，首先会从实例的$options中****获取到data，判断data是函数还是对象，因为data可以是一个函数**（组件）**，也可以是一个对象**（根实例）**，如果是函数会执行getData方法，getData方法简单来说就是返回了data函数执行的结果（**是一个对象）**赋值给 **data和 vm.\_data**；如果是对象直接把data赋值给**data和 vm.\_data**；如果data不存在，把空对象赋值给 **data和 vm.\_data**；****(vm.\_data 就是data中的数据对象) **

**继续，****isPlainObject(data)这个函数判断条件是：data是一个function，但是返回的结果不是一个对象，会抛出警告！**

**接下来**data**中的**key**会组成一个数组，遍历每个**key**与**methods / props **比对，如果一样，会抛出异常，也就是说**：data对象中定义的key（键）不能与props 或 methods 定义的key（键）一样！

继续，isReserved(key)**函数判断**key(键) 不可以 以\_ 或 $ 符号开头，在文档中给出了原因：

![20200130141013550.png][]

继续，proxy(vm, \`\_data\`, key) 这个函数是关键，为data每个数据添加getter setter，同时也能看到为什么通过this（vue实例）可以访问到data中的数据

//  src -> core -> instance -> state.js 
    // 初始化data
    function initData (vm: Component) {
      let data = vm.$options.data
      data = vm._data = typeof data === 'function' // vm._data 就是return 返回的对象
        ? getData(data, vm)
        : data || {}
      if (!isPlainObject(data)) { // 判断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) // [key1, key2, key3, ··· ···]
      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)) { // 判断data中的key 是否与props和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每个数据添加getter setter
        }
      }
      // observe data
      observe(data, true /* asRootData */)
    }

**proxy函数：**

**其实proxy函数很简单，通过 **Object.defineProperty(target, key, sharedPropertyDefinition)**，****会把data中的数据代理转发到vue实例上了。**

**当我们通过vm.xxx 访问data中的数据时，实际上访问的是：** this\[sourceKey\]\[key\] **, 也就是** vm. \_data.\[key\]**  ，而vm.\_data 在上边提到过，它正是data中的数据对象，所以，当我们通过 **实例 **访问data中的数据时，访问的是 this.\_data.xxx**

const sharedPropertyDefinition = {
      enumerable: true,
      configurable: true,
      get: noop,
      set: noop
    }
    // proxy(vm, `_props`, key)
    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)
    }

[20200130141013550.png]: https://img-blog.csdnimg.cn/20200130141013550.png