关注
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
相关推荐
04-18 17:12
安徽工业大学 后端 点赞 评论 收藏
分享

点赞 评论 收藏
分享
牛客热帖
更多
正在热议
更多
# 我和mentor的爱恨情仇 #
11886次浏览 134人参与
# 面试等了一周没回复,还有戏吗 #
110677次浏览 1014人参与
# 平安产险科技中心求职汇总 #
246683次浏览 2626人参与
# 实习进度记录 #
267250次浏览 3380人参与
# 考研可以缓解求职焦虑吗 #
16076次浏览 211人参与
# 硬件人,你被哪些公司给挂了 #
45325次浏览 709人参与
# 五一之后,实习真的很难找吗? #
32679次浏览 165人参与
# 研究所笔面经互助 #
64329次浏览 424人参与
# 你喜欢工作还是上学 #
34327次浏览 358人参与
# 考研失败就一定是坏事吗? #
96413次浏览 812人参与
# 大学生该如何认清当下的就业环境? #
31990次浏览 279人参与
# 你怎么评价今年的春招? #
93340次浏览 1188人参与
# 考研人,我有话说 #
99305次浏览 913人参与
# 浅聊一下我实习的辛苦费 #
214101次浏览 1660人参与
# 我的AI电子员工 #
6063次浏览 52人参与
# 找不到好工作选择GAP真的丢人吗 #
56735次浏览 698人参与
# 格力求职进展汇总 #
169981次浏览 1228人参与
# 如果能重来,就业or读研你选哪个? #
132160次浏览 1658人参与
# 运营人的第一份offer应该如何选 #
137137次浏览 1069人参与
# 毕业论文怎么查AI率 #
20822次浏览 1378人参与
# 实习好累,可以辞职全力准备秋招吗 #
141385次浏览 1521人参与