关注
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
安徽工业大学 后端 点赞 评论 收藏
分享

点赞 评论 收藏
分享
牛客热帖
更多
正在热议
更多
# 设计人如何选offer #
98384次浏览 689人参与
# 找工作,行业重要还是岗位重要? #
7732次浏览 102人参与
# 五一之后,实习真的很难找吗? #
45681次浏览 324人参与
# 盲审过后你想做什么? #
12680次浏览 113人参与
# 外包能不能当跳板? #
22195次浏览 191人参与
# 领导秒批的请假话术 #
9911次浏览 74人参与
# 考研可以缓解求职焦虑吗 #
21150次浏览 251人参与
# 五一假期,你打算“躺”还是“卷”? #
30393次浏览 435人参与
# 找工作前vs找工作后的心路变化 #
7203次浏览 64人参与
# 面试等了一周没回复,还有戏吗 #
115641次浏览 1074人参与
# 硬件人,你被哪些公司给挂了 #
46706次浏览 722人参与
# 安克创新求职进展汇总 #
32578次浏览 415人参与
# 大疆的机械笔试比去年难吗 #
69649次浏览 603人参与
# 应届生薪资多少才合理? #
3115次浏览 24人参与
# 牛友们的论文几号送审 #
27260次浏览 623人参与
# 写简历别走弯路 #
714466次浏览 7850人参与
# 你喜欢工作还是上学 #
37659次浏览 412人参与
# 如果有时光机,你最想去到哪个年纪? #
43331次浏览 769人参与
# 如果不工作真的会快乐吗 #
101219次浏览 867人参与
# 每人推荐一个小而美的高薪公司 #
72849次浏览 1357人参与