vue2响应式原理由Observer类，Dep类和Watcher类互相调用实现，Observer类是把一个普通的object类变成每一层都能相应的类，Dep类的作用是添加，移除，通知和收集订阅者，Watcher类是订阅者，主要功能是把当数据改变的时候，去调用回调函数，修改dom节点
那么是怎么实现响应式的呢，首先是一个函数，要先转换为可响应的，那就需要用到Observer类
//index.js
import Watcher from './Watcher'
import { observe } from './observe'
let obj = {
a: {
m: {
n: 5
}
},
b: 10
}
observe(obj)
new Watcher(obj, 'a.m.n', (val) => {
console.log('成功啦傻子', val)
})
obj.a.m.n = 32
这个observe函数就是对Observer类做多了一层封装
//observe.js
import Observer from './Observer'
export const observe = function (value) {
if (typeof value !== 'object') return
// 定义ob
var ob
if (typeof value.__ob__ !== 'undefined') {
ob = value.__ob__
} else {
ob = new Observer(value)
}
return ob
}
而Observer类是通过Object.defineProperty来监控数据的获取和改变的
//Observer.js
import { def } from './utils'
import defineReactive from './defineReactive'
import Dep from './Dep'
export default class Observer {
//将一个正常的object转换为每个层级属性都是响应式的object
//因为defineReactive会每一层都回调，所以每一层都会调用Observer，也就意味着每一层都会有一个dep
constructor(value) {
// 每一个observer的实例身上都有一个dep
this.dep = new Dep()
// 这里的this表示实例本身
def(value, '__ob__', this, false)
this.walk(value)
console.log('我是Observer构造器', value)
}
walk(value) {
for (let key in value) {
defineReactive(value, key)
}
}
}
关键在于defineReactive方法，这个方法是对Object.defineProperty做了一层封装，并且对对象的每一层做递归调用，实现了每一层都有响应监控
那么在每层都有响应监控的同时，给每层都生成并保存了一个
dep
所以在访问任何一个属性的时候，都能把当前的
Watcher实例保存在Dep类的订阅者数组里
在改变任何一个属性的时候都能通知
Dep类的订阅者数组遍历去触发回调
//defineReactive.js
import { observe } from './observe'
import Dep from './Dep'
export default function defineReactive(data, key, val) {
const dep = new Dep()
if (arguments.length === 2) {
val = data[key]
}
// 将子元素转换为响应式，形成了递归
let childOb = observe(val)
Object.defineProperty(data, key, {
// 可枚举
enumerable: true,
// 可配置
configurable: true,
get() {
console.log('你在访问' + key + '属性')
if (Dep.target) {
dep.depend()
if (childOb) {
childOb.dep.depend()
}
}
return val
},
set(newValue) {
console.log('你试图改变', newValue)
if (val == newValue) {
return
}
val = newValue
childOb = observe(newValue)
dep.notify()
}
})
}
但是是怎么知道现在要保存哪一个Watcher实例到订阅者数组里面的呢？其实就是用了这个Dep.target，Dep.target相当于window.target，全局只有一个，全局也能访问
首先得先讲一讲Watcher类，我们先回到上面的index.js，对象要让Watcher类进行监听，而Watcher有3个参数，第一个是监听的对象，第二个是监听的属性，比如a.b.c.d，第三个是属性改变后触发的回调函数
//Watcher.js
import Dep from './Dep'
import { parsePath } from './utils'
var uid = 0
export default class Watcher {
constructor(target, expression, callback) {
console.log('我是Watcher类的构造器')
this.id = uid++
this.target = target //调用的对象
this.getter = parsePath(expression) //获取属性，比如obj.a.b.c
this.callback = callback
this.value = this.get()
}
update() {
this.run()
}
get() {
Dep.target = this
const obj = this.target
var value
try {
value = this.getter(obj) //调用了属性，引发了响应
} catch (error) {
} finally {
Dep.target = null
}
return value
}
run() {
this.getAndInvoke(this.callback)
}
getAndInvoke(cb) {
//得到并且唤起
let value = this.get()
if (value !== this.value || typeof value == 'object') {
const oldValue = this.value
this.value = value
cb.call(this.target, value, oldValue)
}
}
}
先来讲一下parsePath，这个在工具类里，作用是访问a.b.c.d这种链式属性
//utils.js
export const def = function (obj, key, value, enumerable) {
Object.defineProperty(obj, key, {
value,
enumerable,
writable: true,
configurable: true
})
}
export const parsePath = function (str) {
var segments = str.split('.')
return (obj) => {
for (let i = 0; i < segments.length; i++) {
if (!obj) return
obj = obj[segments[i]]
}
return obj
}
}
首先是触发了Watcher的get()方法，把当前实例保存在了Dep.target里面
然后在调用parsePath获取属性值的过程中，会挨个访问响应对象的属性，就会触发相应的getter，我们回到defineReactive.js，可以发现这时候相应属性的getter就会把Dep.target也就是相应的Watcher的实例保存在了Dep类的订阅者数组里面
//Dep.js
var uid = 0
export default class Dep {
constructor() {
console.log('我是Dep类的构造器')
this.id = uid++
this.subs = [] //订阅者,Watcher的实例
}
addSub(sub) {
//添加订阅
this.subs.push(sub)
}
depend() {
//添加依赖
if (Dep.target) {
//自定义的全局唯一的变量（位置）
this.addSub(Dep.target)
}
}
notify() {
//通知订阅
console.log('我是notify')
let subs = this.subs.slice()
for (let i = 0; i < subs.length; i++) {
subs[i].update()
}
}
}
最后，在改变属性的时候，相应属性的setter就会通知之前已经保存的订阅者数组，遍历触发回调