失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 为啥面试官总喜欢问computed是咋实现的?

为啥面试官总喜欢问computed是咋实现的?

时间:2019-07-14 08:27:36

相关推荐

为啥面试官总喜欢问computed是咋实现的?

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

从computed的特性出发

computed最耀眼的几个特性是啥?

1. 依赖追踪

我们定义了一个响应式数据state和一个计算属性sum, Vue会自动追踪sum依赖的数据state.astate.b,并建立相应的依赖关系。

也就是只有state.astate.b发生变化的时候,sum才会重新计算而state.c任由它怎么变,sum都将丝毫不受影响。

2. 缓存

还是上面的例子,如果state.astate.b打死都不再改变值了,那么我们读取sum的时候,它将会返回上一次计算的结果,而不是重新计算。

3. 懒计算

这个特性比较容易被忽略,简单地说只有计算属性真正被使用(读取)的时候才会进行计算,否则咱就仅仅是定义了一个变量而已。

挨个实现computed特性

1. 懒计算

我们依旧围绕effect函数来搞事情,到目前为止,effect注册的回调都是立刻执行。

想要实现computed的懒执行,咱们可以参考上篇文章Vue3:原来你是这样的“异步更新”的思路,添加一个额外的参数lazy

它要实现的功能是:如果传递了lazytrue,副作用函数将不会立即执行,而是将执行的时机交还给用户,由用户决定啥时候执行。

当然啦!回调的结果我们也应该一并返回(例如上面的value值)

你能想象,我们仅仅需要改造几行代码就能离computed近了一大步。

测试一波

2. 依赖追踪

咱们初步实现了懒执行的特性,为了更像computed一点,我们需要封装一个函数。

这就有点那么味道啦!

测试一波

可以看到computed只会依赖state.astate.b,而不会依赖state.c,这得益于我们前面几篇文章实现的响应式系统,所以到了计算属性这里,我们不用改动任何代码,天然就支持。

不过还是有点小问题,我们读取了两次sum.value,sum却被执行了两次,这和computed缓存的特性就不符了。

别急,马上就要实现了这个最重要的特性了。

3. 缓存

回顾一下computed的缓存特性:

只有当其依赖的东西发生变化了才需要重新计算否则就返回上一次执行的结果。

为了缓存上一次计算的结果,咱们需要定义一个value变量,现在的关键是怎么才能知道其依赖的数据发生变化了呢?

测试一波

寄上任务调度

不得不说,任务调度实在太强大了,不仅仅可以实现数组的异步批量更新、在computedwatch中也是必不可少的。

测试一波

完美!!!这下面试官再也难不倒我了!!!

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

前端面试题库 (面试必备)推荐:★★★★★

地址:前端面试题库

如果觉得《为啥面试官总喜欢问computed是咋实现的?》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。