vue动态数据绑定3--深层次数据变化逐层往上传播

基于vue动态数据绑定2，再多考虑一个问题：”深层次数据变化如何逐层往上传播”。举个例子。

let app = new Observer({
name: {
first: 'yy',
last: 'jm'
},
age: 18
});

app2.$watch('name', function (newName) {
console.log('你的姓名发生了变化')
});

app.data.name.firstName = 'hahaha';
// 输出：你的姓名发生了变化。

为了实现深层次数据变化的向上传播，需要得到被改变的数据的父级并触发相应的回调函数，然后再逐级向上触发每一层级的回调函数。实现代码如下：

<script>
function Observer(data, events, parent, parentKey){
this.data = data;
this.events = events || {};
this.parent = parent || {};
this.parentKey = parentKey || '';
this.walk(data, this.events);
}
Observer.prototype.walk = function(data, events) {
for(var key in data) {
if(data.hasOwnProperty(key)){
if(typeof(data[key]) == 'object'){
new Observer(data[key], events, this, key)
};
this.convert(key, data[key], events);
}
}
}
Observer.prototype.convert = function(key, val, events) {
var self = this;
Object.defineProperty(this.data, key, {
enumerable: true,
configurable: true,
get: function() {
console.log('你访问了' + key);
return val;
},
set: function(newVal) {
console.log('你设置了', key, ',新的值为', newVal);
if (newVal !== val) {
val = newVal;
// 保存key的上级，如果有的话
var parent = self.parent;
// 保存key的上级的key值
var parentKey = self.parentKey;
// 循环寻找上级触发事件
while (parent) {
self.$emit(parentKey, newVal);
parentKey = parent.parentKey;
parent = parent.parent;
}
//触发当前key事件
self.$emit(key, newVal);
}
// 如果这个newVal是obj，继续递归调用new Observer
if (typeof newVal === "object") {
return new Observer(newVal, events, this, key);
}
}
})
}

Observer.prototype.$watch = function(key, listener) {
if(!this.events[key]){
this.events[key] = [];
};
this.events[key].push(listener);
}

Observer.prototype.$emit = function() {
var key = [].shift.call(arguments);
var data = [].slice.call(arguments);
if(!this.events[key] || this.events[key].length < 1) return;
this.events[key].forEach(function(listener){
listener(data || {})
})
}
var data = {
user: {
name: {
first: {
y: "y"
},
last: "jm"
},
age: 18
},
address: "成都"
}

let app = new Observer(data);

app.$watch('user', function() {
console.log('你改变了user');
});
app.$watch('name', function(){
console.log('你改变了name');
});
app.$watch('first', function(){
console.log('你改变了first');
});
app.$watch('y', function(y){
console.log(`你改变了y, 现在是${y}`);
});
app.$watch('age', function(age){
console.log(`你的age改变了，现在是${age}`);
});
app.$watch('address', function(address){
console.log(`你的address改变了，现在是${address}`);
});
app.data.user.age = 20;
</script>

在vue数据绑定2的基础上，增加了this.parent、提示。parentKey用于得到相应元素的上级，然后再得到上级的上级… 。

效果如下：