Vue 3 中的 computed 和 watch 在内部实现上有什么区别?它们各自的优化策略是什么?

大家好,欢迎来到今天的 Vue 3 内部机制小课堂。今天咱们聊聊 computed 和 watch 这俩哥们儿,看看他们表面上的兄弟情深背后,到底藏着多少不为人知的秘密。 (清清嗓子) 首先,咱们先用大白话捋一捋 computed 和 watch 都是干啥的。 computed:计算属性,懒加载的乖宝宝 computed 这家伙,就像一个特别靠谱的管家。你给他一个或多个依赖,他会根据这些依赖的值,帮你计算出一个新的值。关键是,他很懒!只有在你真正需要用到这个计算结果的时候,他才会开始计算。而且,如果依赖的值没变,他就直接把上次计算的结果拿出来给你,省时省力。 watch:侦听器,时刻待命的警卫 watch 就不一样了,他更像一个尽职尽责的保安。你告诉他要盯住哪个数据,只要这个数据一发生变化,他立马跳出来,执行你预先安排好的任务。他可不像 computed 那么懒,只要盯住的数据变了,他就绝不偷懒,立马执行。 好了,有了这两个概念,咱们就可以深入到他们的内部实现了。准备好了吗?接下来就是烧脑环节,但是别怕,我会尽量讲得通俗易懂。 computed 的内部实现:依赖追踪 + 缓存 comp …