前端实习
问computed的底层实现代码以及原理,还有vue2的push为什么可以实现数据响应,底层的代码是怎么实现的,前端实习生都这么卷吗![](https://uploadfiles.nowcoder.com/images/20220815/318889480_1660553763930/8B36D115CE5468E380708713273FEF43)
#在找工作求抱抱# #互联网没坑了,还能去哪里?# #如何判断面试是否凉了# #牛客解忧铺#
全部评论
vue源码的话可以看看这个项目https://github.com/coderwei99/coderwei-mini-vue3,跟着敲一遍基本上就懂得七七八八了
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函数,并将计算结果缓存起来,以便下次使用。这样就实现了数组的响应式更新。
前端实习生真的这么辛苦吗?
实习都问源码了,好卷啊😭
跟当初基本一样哈哈
![](https://uploadfiles.nowcoder.com/files/20240514/510894044_1715654316364/pingllunicon.png)
几年
这些其实也是八股,别被吓到了
相关推荐