vue响应式原理细节求解答

对于vue响应式原理,里面的watcher。有个疑问。
(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 }
2 回复 分享
发布于 2023-09-12 15:34 辽宁

相关推荐

2025-12-24 15:25
已编辑
门头沟学院 前端工程师
是腾讯的csig腾讯云,前天晚上九点突然打电话约面,激动的通宵学了一晚上,第二天状态很差改了今天(以后再也不通宵学习了)感觉自己浪费了面试官一个半小时单纯手写+场景,无八股无项目无算法,打击真的很大,全是在面试官提醒的情况下完成的,自己技术方面真的还是有待提高,实力匹配不上大厂和已经面试的两个公司完全不一样,很注重编码能力和解决问题的能力,然而我这两个方面都很薄弱,面试官人很好很耐心的等我写完题目,遇到瓶颈也会提醒我,写不出题也会很耐心的跟我讲解好感动,到最后面试结束还安慰我打算把下周最后一场面试面完之后就不面啦,如果能去实习还是很开心,但是最重要的还是好好努力提高技术以下是面经第一题// 实现一个解析 url 参数的函数function parseUrl(urlStr) {// TODO}parseUrl('*********************************************');// 返回 {a: 1, b: 2, c: 3}追问:在链接里见过什么部分?用 hash 路由的话放在哪第二题// 考虑有一个异步任务要执行,返回 Promise,这个任务可能会失败,请实现 retry 方法,返回新方法,可以在失败后自动重试指定的次数。/*** 异步任务重试* @param task 要执行的异步任务* @param times 需要重试的次数,默认为 3 次*/function retry(task, times = 3) {// TODO: 请实现}// ---------------测试示例 ----------------// 原方法const request = async (data) => {// 模拟失败if (Math.random() < 0.7) {throw new Error('request failed');}const res = await fetch('https://jsonplaceholder.typicode.com/posts', {method: 'POST',body: JSON.stringify(data),});return res.json();}// 新的方法const requestWithRetry = retry(request);// 使用async function run() {const res = await requestWithRetry({ body: 'content' });console.log(res);}run();第三题就是给 retry 函数添加类型注释,用到泛型第四题:在组件库中将 Alert 用 api 的形式实现(应该就是 message 这个组件)怎么渲染到一个浮层里而不是原地渲染出来
不知道怎么取名字_:技术这个东西,太杂了,而且要下功夫的
查看5道真题和解析
点赞 评论 收藏
分享
评论
4
12
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务