我们知道 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)
每一行 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 对象，就基本实现了框架里面的响应式模块。考虑到篇幅，以及还有没出场的对象，这里就先不展开了，大家留个印象就成。
❓ 遗留问题
- 在 $props & $data 节段中，
this._data和this._props哪来的？ -
Watcher和Dep如何实现响应式属性？
下一篇：02. 认识 Vue 对象（二）
网友评论