2023-09-11 16:44 哈尔滨理工大学 Web前端
关注
vue响应式原理细节求解答
对于vue响应式原理，里面的watcher。有个疑问。
（1）每个组件只有一个watcher，当数据被读取会被添加到相应的dep中。
（2）在某处用到该数据就会new一个新的watcher，然后添加到dep中呢。
这两种说法哪个对？
给出两个例子，帮忙分析，感谢。
例如，这个图片中dep1和dep2。如果按说法（1），那图中的三个watcher应该是同一个。但是vue官方文档的说法是图2到底哪个才是对的？求解答
（1）每个组件只有一个watcher，当数据被读取会被添加到相应的dep中。
（2）在某处用到该数据就会new一个新的watcher，然后添加到dep中呢。
这两种说法哪个对？
给出两个例子，帮忙分析，感谢。
例如，这个图片中dep1和dep2。如果按说法（1），那图中的三个watcher应该是同一个。但是vue官方文档的说法是图2到底哪个才是对的？求解答
全部评论
程序员小洛
门头沟学院 前端工程师
第一个是对的， watcher 中有这样一句话， this.value = this.get() 在getter 中会这样执行 ，
function getter () {
pushTarget(this) // 将watcher放到Dep.target上
value = this.getter() // 如果是组件，这里的getter 就是就是模板编译后的渲染函数，执行执行这个函数会触发 Object.defineProperty() 中的 get，set, 会触发依赖手机，这样就可以做到，一个组件中用到多个变量，这多个变量的 Dep中都保存着这个组件的 watcher
popTarget() // Dep.target 移除watcher
}
相关推荐
11-19 16:07
浙江大学 采购 点赞 评论 收藏
分享
点赞 评论 收藏
分享