data 数据双向绑定

Question

data() {
info: {
age: 22,
fo: {
name: ‘jack’,
msg:‘eeee’
}
}
}
两个疑问：
1、var childOb = !shallow && observe(val);
Object.defineProperty(obj, key, {})
多层嵌套的 obj是变化的 fo 怎么跟对象info有关联
2、多层嵌套的是不是会有多个watcher 比如age fo name 这些是不是都可以代表一个watcher呢

老师请回答下 纠结了很久 弄不明白

Answer 1

ustbhuangyi 2019-01-27 00:56:49

1. 这种多层嵌套的数据，通常在初始化响应式的时候，会递归地给它的子属性都执行 Object.defineProperty 定义 getter 和 setter，深层次的 fo 一旦被访问了，则会触发 getter 收集依赖。如何被访问，一种是你在代码中使用了 this.info.fo，还有一种是你 deep watch 了 info。
2. 正常对于一个组件，如果你没有自定义 watcher，没有定义 computed 计算属性，那么组件只有一个 render watcher，如果你在模板中访问了如 age，info.fo.name 这些，则它们的 getter 触发，并且收集的依赖都到我们组件的 render watcher 中，所以一旦你在代码中修改了这些数据，就会触发 render watcher 的 update，从而触发组件的重新渲染。

• 提问者 前端攻城 #1

  非常感谢这么晚来解答问题  对于收集依赖还是不怎么懂 Dep 作为watcher 桥梁感觉有点复杂

• ustbhuangyi 回复 提问者 前端攻城 #2

  多看几遍，写几个小例子单步调试一下，理一理