获得徽章 18
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
![[吐舌]](http://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web_seo/img/jj_emoji_95.6b0752f.png)
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
已知场景：
- 响应式数据a和基于a的计算属性b，模板里面引用了b
- 副作用：b副作用，模板副作用
总结：
vue2-收集：模板(这时候Dep.target是模板副作用)调用了b(这时候Dep.target是b副作用)，b调用了响应式数据a，这时候把b副作用存到a的dep中，同时b会收集a的dep到自己的deps里面，弹出顶层b副作用(这时候Dep.target是模板副作用)，b会对deps循环，并把Dep.target加到dep里面，这样a就拿到了模板副作用。结束后，a的副作用：[b副作用，模板副作用]
vue2-修改：把a修改
触发a的set，对dep循环
1. 触发b副作用，修改dirty成true
2. 触发模板副作用，期间会触发b的get，因为已经变成true，会真正调用一次b的计算函数
vue3-收集：
模板触发b的get，b收集模板副作用，会真实计算一次计算函数，期间a会收集b副作用
- a副作用：【b副作用】
- b副作用：【模板副作用】
vue3-修改：把a修改
a触发set，循环dep，触发b副作用，把dirty修改成true，循环b的dep，触发模板副作用，模板触发b的get，因为dirty已经是true，所以会真正调用一次b的计算函数
- 响应式数据a和基于a的计算属性b，模板里面引用了b
- 副作用：b副作用，模板副作用
总结：
vue2-收集：模板(这时候Dep.target是模板副作用)调用了b(这时候Dep.target是b副作用)，b调用了响应式数据a，这时候把b副作用存到a的dep中，同时b会收集a的dep到自己的deps里面，弹出顶层b副作用(这时候Dep.target是模板副作用)，b会对deps循环，并把Dep.target加到dep里面，这样a就拿到了模板副作用。结束后，a的副作用：[b副作用，模板副作用]
vue2-修改：把a修改
触发a的set，对dep循环
1. 触发b副作用，修改dirty成true
2. 触发模板副作用，期间会触发b的get，因为已经变成true，会真正调用一次b的计算函数
vue3-收集：
模板触发b的get，b收集模板副作用，会真实计算一次计算函数，期间a会收集b副作用
- a副作用：【b副作用】
- b副作用：【模板副作用】
vue3-修改：把a修改
a触发set，循环dep，触发b副作用，把dirty修改成true，循环b的dep，触发模板副作用，模板触发b的get，因为dirty已经是true，所以会真正调用一次b的计算函数
展开
1
1