老师,先祝您元旦快乐,新年大吉啦~~
关于props 的响应式,比如 下面的代码
// child 子组件
<template>
<div>{{ a }}</div>
<div>{{ b.c }}</div>
</template>
<script>
props: {
a: {
type: Object
},
b: Object
}
</script>
// parent 父组件
<template>
<child :a="a" :b="b" />
</template>
<script>
data: {
a: { a: 2 },
b: { c: 3 }
}
</script>
首先在父组件 init 时, 会将 a, b 变成响应式对象, 然后在渲染过程中,为什么说 父组件访问了 a 和 b呢? 是因为 给 child 组件传值的时候 访问 了 a b 触发了 getter 吗?
另外在子组件 initProps 时, 也会将 a 和 b 变成响应式对象。 对于a 属性,子组件直接引用了a, 所以 子组件渲染watcher 订阅了 a 这个依赖,而对于 b属性,子组件使用的是 b的c属性, 触发了c属性的getter, 子组件渲染watcher订阅了 c这个依赖。
所以在props 值变化时:
对于属性a :
对于属性b:
子组件渲染时访问了 b中的c 属性,触发 c属性的getter,子组件渲染watcher 订阅了 依赖。
修改时:
3. 执行 this.b.c = 9 修改对象b中的属性值, 会触发c的setter, 子组件渲染watcher 重新渲染,子组件更新。
4. 执行 this.b = { c: 99 } 赋值操作,此时触发的是 b的setter, 父组件渲染watcher 进行更新,patch 过程 对 props 属性 赋值时, 触发了b的setter, 此时子组件 渲染 wacther 重新渲染,子组件更新。
总结: props的更新 如何影响子组件的重新渲染 和 子组件 视图中如何引用这个props 有关系,这影响到watcher 订阅的依赖 到底是 整个对象,还是某个对象属性。
老师,写的有点多,还请辛苦看下 有没有理解上的误区,感谢老师~