Vue2.0 源码分析笔记（一）

在 src/core/instance/state.js 文件中，有一个 stateMixin 方法，如下：

 const dataDef = {}
  dataDef.get = function () { return this._data }
  const propsDef = {}
  propsDef.get = function () { return this._props }
  if (process.env.NODE_ENV !== 'production') {
    dataDef.set = function (newData: Object) {
      warn(
        'Avoid replacing instance root $data. ' +
        'Use nested data properties instead.',
        this
      )
    }
    propsDef.set = function () {
      warn(`$props is readonly.`, this)
    }
  }
  Object.defineProperty(Vue.prototype, '$data', dataDef)
  Object.defineProperty(Vue.prototype, '$props', propsDef)

我们先看最后两句，使用 Object.defineProperty 在 Vue.prototype 上定义了两个属性，就是大家熟悉的：$data 和 $props，这两个属性的定义分别写在了 dataDef 以及 propsDef 这两个对象里，我们来仔细看一下这两个对象的定义，可以看到，$data 属性实际上代理的是 _data 这个实例属性，而 $props 代理的是 _props 这个实例属性。然后有一个是否为生产环境的判断，如果不是生产环境的话，就为 $data 和 $props 这两个属性设置一下 set，实际上就是提示你一下：别他娘的想修改我，老子无敌。

也就是说，$data 和$props 是两个只读的属性，所以，现在让你使用 js 实现一个只读的属性，也可以参考这种写法。