01.|01. 认识 Vue 对象（一） 01.认识Vue对象（一）

前篇：00. 我和 Vue.js 没一点新意的故事
我们知道 JS 的面向对象，是基于原型（Prototype）的面向对象。所以第一步我们先看看 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) }

入参 options 就是我们在 new Vue() 里传入的参数，这很好理解，但是 this._init(options) 方法哪来的呢？别急，我们慢慢往下看。
如此简单的对象定义，自然不足以支撑 MVVM 这个庞大的架构。顺着代码往下看，可以看到下面几行代码：

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

【01.|01. 认识 Vue 对象（一）】每一行 Mixin 方法的执行，都在为 Vue 传输功力。我们先来看 initMixin(Vue)，这个方法就做了一件事，给 Vue 增加 _init 方法，对了，就是上面 this._init(options) 方法的由来。至于 _init 里面做了什么事，我们留到后面讲解初始化 Vue 实例的时候再分析。
接着执行 stateMixin(Vue)，给 Vue.prototype 增加属性和方法：

属性：$data
属性：$props
方法：$set
方法：$delete
方法：$watch

上面这些属性和方法的作用，大家可以通过 Vue API 查看，我们这里稍微讲点有技术的。
? $data & $props 我们来看下面这段定义 $data 和 $props 的代码：

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 对 $data 和 $props 的赋值（set）和取值（get）进行拦截（or 代理），其中 this.$data 的值从 this._data 中取，this.$props 的值从 this._props 中取。在生产模式（production）下，赋值是不被允许的（因为没有 set 方法）；在开发环境下，赋值会在控制台输出警告（warn）信息。
? $set & $delete 接着我们来看 $set 方法，这个方法引用了 set 方法，如下：

export function set(target, key, val) { if ( process.env.NODE_ENV !== 'production' && (isUndef(target) || isPrimitive(target)) ) { warn( `Cannot set reactive property on undefined, null, or primitive value: ${target}` ) } if (Array.isArray(target) && isValidArrayIndex(key)) { target.length = Math.max(target.length, key) target.splice(key, 1, val) return val } if (key in target && !(key in Object.prototype)) { target[key] = val return val } const ob = target.__ob__ if (target._isVue || (ob && ob.vmCount)) { process.env.NODE_ENV !== 'production' && warn( 'Avoid adding reactive properties to a Vue instance or its root $data ' + 'at runtime - declare it upfront in the data option.' ) return val } if (!ob) { target[key] = val return val } defineReactive(ob.value, key, val) ob.dep.notify() return val }

代码的前半部分很简单，我们把重点放在后半部分，从 const ob = target.__ob__ 开始。这里我们先简单介绍下 __ob__ 这个属性：首先它是 Observe 对象的一个实例，简单讲，有这个属性的属性（target）是一个响应式属性（有点拗口，可以读慢点体会下），响应式属性可以触发页面的更新。
接着从 warn() 的提示中可以知道，当 __ob__.vmCount 的值为真值（实际是 Number 类型，即＞0）的话，说明这个 target 是一个根数据（$data），是不能被 set 的。
defineReactive(obj, key, value) 定义响应式属性；ob.dep.notify() 对依赖该属性的订阅者发布广播。这两个方法之后还会不断的出现，我们这里就不详细展开了。
$delete 的原理和 $set 几乎一下，这里也略了。
? $watch 这个方法很重要，引出了 Vue 里面一个很重要的辅助对象：Watcher，配合上面提到的 defineReactive 方法，以及还没出场的 Dep 对象，就基本实现了框架里面的响应式模块。考虑到篇幅，以及还有没出场的对象，这里就先不展开了，大家留个印象就成。
? 遗留问题