共计 2792 个字符，预计需要花费 7 分钟才能阅读完成。
vue
Vue 通过设定对象属性的 setter/getter 方法来监听数据的变化，通过 getter 进行依赖收集，而每个 setter 方法就是一个观察者，在数据变更的时候通知订阅者更新视图。
将数据 data 变成可观察的（observable）
那么 Vue 是如何将所有 data 下面的属性变成可观察的呢？
function obsever(value,cb){
Object.keys(value).forEach((key)=>defineReactive(value,key,value[key],cb))
}
function defineReactive(obj,key,val,cb){
Object.defineProperty(obj,key,{
enumerable;true,
configurable:true,
get:()=>{
/* 依赖收集 */
return val;
},
set:newVal=>{
val=newVal;
cb();
}
})
}
class Vue{
constructor(options){
this._data = options.data;
obsever(this._data,options.render)
}
}
let app = new Vue({
el:’#app’,
data:{
text:’text’,
text2:’text2′
},
render(){
console.log(‘render’)
}
})
为了便于理解，首先考虑一种最简单的情况，不考虑数组等情况，代码如上所示。在 initData 中会调用 observe 这个函数将 Vue 的数据设置成 observable 的。当_data 数据发生改变的时候就会触发 set，对订阅者进行回调（在这里是 render）。那么问题来了，需要对 app._data.text 操作才会触发 set。为了偷懒，我们需要一种方便的方法通过 app.text 直接设置就能触发 set 对视图进行重绘。那么就需要到代理。
代理
我们可以在 Vue 的构造函数 constructor 中为 data 执行一个代理 proxy。这样我们就把 data 上面的属性代理到了 vm 实例上。
_proxy.call(this,options.data);// 构造函数
// 代理
function _proxy(data){
const that = this;
Object.keys(data).forEach(key=>{
configurable:true,
enumerable:true,
get:function proxyGetter(){
return that._data[key]
},
set:function proxySetter(val){
that._data[key] = val;
}
})
}
我们就可以用 app.text 代替 app._data.text 了。
为什么要依赖收集
先看下面这段代码
new Vue({
template:`<div>
<span>text1:</span>{{text1}}
<span>text2:</span>{{tetx2}}
</div>`,
data:{
text1:’text1′,
text2:’text2′,
text3:’text3′
}
})
按照上面的响应式原理中的方法进行绑定则会出现一个问题 –text3 在实际模板中并没有被用到，然而当 text3 的数据被修改时，同样会触发 text3 的 setter 导致重新执行渲染，这显然不正确。
先说说 Dep
当对 data 上的对象进行修改值的时候会触发它的 setter，那么取值的时候自然会触发 getter 事件，所以我们只要在最开始进行一次 render，那么所有被渲染所依赖的 data 中的数据就会被 getter 收集到 Dep 的 subs 中去。在对 data 中的数据进行修改的时候 setter 只会触发 Dep 的 subs 函数。定义一个依赖收集类的 Dep。
class Dep{
constructor(){
this.subs = [];
}
addSub(sub:Watcher){
this.subs.push(sub)
}
removeSub(sub:Watcher){
remove(this.subs,sub)
}
notify(){
const subs = this.subs.slice()
for(let i = 0;l=subs.length;i<1;i++){
subs[i].update()
}
}
}
function remove(arr,item){
if(arr.length){
const index = arr.indexOf(item)
if(index>-1){
return arr.splice(index,1)
}
}
}
Watcher
订阅者，当依赖收集的时候会 addSub 到 sub 中，在修改 data 中数据的时候会触发 dep 对象的 notify，通知所有 Watcher 对象去修改对应视图。
class Watcher {
constructor (vm, expOrFn, cb, options) {
this.cb = cb;
this.vm = vm;
/* 在这里将观察者本身赋值给全局的 target，只有被 target 标记过的才会进行依赖收集 */
Dep.target = this;
/*Github:https://github.com/answershuto*/
/* 触发渲染操作进行依赖收集 */
this.cb.call(this.vm);
}
update () {
this.cb.call(this.vm);
}
}
开始依赖收集
class Vue {
constructor(options) {
this._data = options.data;
observer(this._data, options.render);
let watcher = new Watcher(this,);
}
}
function defineReactive (obj, key, val, cb) {
/* 在闭包内存储一个 Dep 对象 */
const dep = new Dep();
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: ()=>{
if (Dep.target) {
/*Watcher 对象存在全局的 Dep.target 中 */
dep.addSub(Dep.target);
}
},
set:newVal=> {
/* 只有之前 addSub 中的函数才会触发 */
dep.notify();
}
})
}
Dep.target = null;
将观察者 Watcher 实例赋值给全局的 Dep.target，然后触发 render 操作只有被 Dep.target 标记过的才会进行依赖收集。有 Dep.target 的对象会将 Watcher 的实例 push 到 subs 中，在对象被修改触发 setter 操作的时候 dep 会调用 subs 中的 Watcher 实例的 update 方法进行渲染。