关注
computed的底层实现代码是基于Vue的响应式系统实现的。在Vue中,每个组件实例都有一个Watcher实例,Watcher实例会监听组件实例中所有响应式数据的变化。当响应式数据发生变化时,Watcher实例会重新计算computed属性的值,并将计算结果缓存起来,以便下次使用。
具体来说,computed属性的底层实现代码包括以下几个步骤:
1. 在组件实例中定义computed属性,并指定计算函数。
2. 在组件实例创建时,为每个computed属性创建一个Watcher实例,并将计算函数作为Watcher实例的回调函数。
3. 当响应式数据发生变化时,Watcher实例会被通知,然后重新计算computed属性的值。
4. 如果计算结果与之前的缓存值不同,Watcher实例会将新值缓存起来,并通知组件实例更新视图。
至于Vue2的push为什么可以实现数据响应,其底层实现代码是基于JavaScript的Object.defineProperty()方法实现的。在Vue2中,每个响应式对象的属性都被转换为getter和setter函数,当属性被读取或修改时,getter和setter函数会被调用,从而实现数据响应。
具体来说,当调用数组的push方法时,Vue2会拦截该方法的调用,并在内部调用原生的Array.prototype.push方法,然后通知组件实例更新视图。在通知更新视图时,Vue2会检测数组的长度是否发生变化,如果发生变化,则会重新计算数组的每个元素的getter函数,并将计算结果缓存起来,以便下次使用。这样就实现了数组的响应式更新。
查看原帖
3 2
相关推荐


腾讯
| 校招
| 超多精选岗位
点赞 评论 收藏
分享
点赞 评论 收藏
分享
点赞 评论 收藏
分享
牛客热帖
更多
- 1... 脱下孔乙己长衫,浅聊一下就业下沉!1.8W
- 2... 美团java后端日常实习一二面1.3W
- 3... 腾讯PCG QQ后台开发一面9925
- 4... 腾讯/字节/快手 前端面经汇总8360
- 5... 【未来准备7】就业下沉时代,如何摆脱困境6909
- 6... 实习入职第一天,应该做点啥❓6167
- 7... 腾讯2025暑期实习提前批前端开发面经(已OC)5447
- 8... 【有奖互动】你问过DeepSeek什么意想不到的问题?5218
- 9... 腾讯hr部门有约三面的吗4792
- 10... [26届四段大厂]“HR面致命题!腾讯字节亲测”4635
正在热议
更多
# 听劝,这个简历怎么改 #
16614次浏览 221人参与
# 你见过最离谱的招聘要求是什么? #
145422次浏览 843人参与
# 水滴春招 #
33088次浏览 567人参与
# 你想留在一线还是回老家? #
16425次浏览 236人参与
# 分享一个让你热爱工作的瞬间 #
16255次浏览 173人参与
# 入职第四天,心情怎么样 #
12300次浏览 81人参与
# 面试被问“你的缺点是什么?”怎么答 #
9944次浏览 197人参与
# 参加完秋招的机械人,还参加春招吗? #
27531次浏览 280人参与
# 如果你有一天可以担任公司的CEO,你会做哪三件事? #
20677次浏览 415人参与
# 第一份工作应该选高薪还是热爱? #
4185次浏览 77人参与
# 如果重来一次你还会读研吗 #
156778次浏览 1716人参与
# 租房找室友 #
8402次浏览 53人参与
# 地方国企笔面经互助 #
18091次浏览 26人参与
# 职场新人生存指南 #
200604次浏览 5546人参与
# 简历无回复,你会继续海投还是优化再投? #
48931次浏览 564人参与
# 读研or工作,哪个性价比更高? #
26417次浏览 357人参与
# 你们的毕业论文什么进度了 #
904016次浏览 8991人参与
# 文科生还参加今年的春招吗 #
4349次浏览 32人参与
# 长光卫星求职进展汇总 #
27897次浏览 190人参与
# 百度工作体验 #
178150次浏览 1780人参与
# 招聘要求与实际实习内容不符怎么办 #
49213次浏览 506人参与