Vue源码–解读vue响应式原理

function Dep() {

//主题对象
this.subs = []; //订阅者列表
}
Dep.prototype.notify = function() { //主题对象通知订阅者
this.subs.forEach(function(sub){ //遍历所有的订阅者，执行订阅者提供的更新方法
sub.update();
});
}
function Sub(x) { //订阅者
this.x = x;
}、
Sub.prototype.update = function() { //订阅者更新
this.x = this.x * this.x;
console.log(this.x);
}
var pub = { //发布者
publish: function() {


dep.notify();
}
};
var dep = new Dep(); //主题对象实例
Array.prototype.push.call(dep.subs, new Sub(1), new Sub(2), new Sub(3)); //新增 3 个订阅者
pub.publish(); //发布者发布更新
// 1
// 4
// 9

constructor (value: any) {


this.value = value
this.dep = new Dep()
this.vmCount = 0
def(value, '__ob__', this)
if (Array.isArray(value)) {


const augment = hasProto
? protoAugment
: copyAugment
augment(value, arrayMethods, arrayKeys)
this.observeArray(value)
} else {


this.walk(value)
}
}

function defineReactive (
obj: Object,
key: string,
val: any,
customSetter?: ?Function,
shallow?: boolean
) {


const dep = new Dep()

const property = Object.getOwnPropertyDescriptor(obj, key)
if (property && property.cOnfigurable=== false) {


return
}

// cater for pre-defined getter/setters
const getter = property && property.get
const setter = property && property.set

let childOb = !shallow && observe(val)
Object.defineProperty(obj, key, {


enumerable: true,
configurable: true,
get: function reactiveGetter () {


const value = getter ? getter.call(obj) : val
if (Dep.target) {


dep.depend()
if (childOb) {


childOb.dep.depend()
if (Array.isArray(value)) {


dependArray(value)
}
}
}
return value
},
set: function reactiveSetter (newVal) {


const value = getter ? getter.call(obj) : val
/* eslint-disable no-self-compare */
if (newVal === value || (newVal !== newVal && value !== value)) {


return
}
/* eslint-enable no-self-compare */
if (process.env.NODE_ENV !== 'production' && customSetter) {


customSetter()
}
if (setter) {


setter.call(obj, newVal)
} else {


val = newVal
}
childOb = !shallow && observe(newVal)
dep.notify()
}
})
}

class Dep {


static target: ?Watcher;
id: number;
subs: Array;

constructor () {


this.id = uid++
this.subs = []
}

addSub (sub: Watcher) {


this.subs.push(sub)
}

removeSub (sub: Watcher) {


remove(this.subs, sub)
}

depend () {


if (Dep.target) {


Dep.target.addDep(this)
}
}

notify () {


// stabilize the subscriber list first
const subs = this.subs.slice()
for (let i = 0, l = subs.length; i

subs[i].update()
}
}
}
Dep.target = null

constructor (
vm: Component,
expOrFn: string | Function,
cb: Function,
options?: ?Object,
isRenderWatcher?: boolean
) {


this.vm = vm
if (isRenderWatcher) {


vm._watcher = this
}
vm._watchers.push(this)
// options
if (options) {


this.deep = !!options.deep
this.user = !!options.user
this.lazy = !!options.lazy
this.sync = !!options.sync
} else {


this.deep = this.user = this.lazy = this.sync = false
}
this.cb = cb
this.id = ++uid // uid for batching
this.active = true
this.dirty = this.lazy // for lazy watchers
this.deps = []
this.newDeps = []
this.depIds = new Set()
this.newDepIds = new Set()
this.expression = process.env.NODE_ENV !== 'production'
? expOrFn.toString()
: ''
// parse expression for getter
if (typeof expOrFn === 'function') {


this.getter = expOrFn
} else {


this.getter = parsePath(expOrFn)
if (!this.getter) {


this.getter = function () {}
process.env.NODE_ENV !== 'production' && warn(
`Failed watching path: "${expOrFn}" ` +
'Watcher only accepts simple dot-delimited paths. ' +
'For full control, use a function instead.',
vm
)
}
}
this.value = this.lazy
? undefined
: this.get()
}

/**
* Evaluate the getter, and re-collect dependencies.
*/
get () {


pushTarget(this)
let value
const vm = this.vm
try {


value = this.getter.call(vm, vm)
} catch (e) {


if (this.user) {


handleError(e, vm, `getter for watcher "${
this.expression}"`)
} else {


throw e
}
} finally {


// "touch" every property so they are all tracked as
// dependencies for deep watching
if (this.deep) {


traverse(value)
}
popTarget()
this.cleanupDeps()
}
return value
}

/**
* Add a dependency to this directive.
*/
addDep (dep: Dep) {


const id = dep.id
if (!this.newDepIds.has(id)) {


this.newDepIds.add(id)
this.newDeps.push(dep)
if (!this.depIds.has(id)) {


dep.addSub(this)
}
}
}