vue3源码解读--ref

目录

    vue2源码

    vue3源码

示例

源码

    上一节我们了解了setup的运行逻辑,它确实能很好的将setup中返回的值显示到template中,但是当我们想要在代码中改变它时,却发现是无效的,原因可能是没有进行依赖收集的缘故。在vue官网中指明ref可以进行响应式处理,那我们就来看看它是怎么玩儿的

    将代码定位到执行setup函数的地方,即callWithErrorHandling

    这将调用ref函数,这实际上调用的RefImpl类,其中将value在_value上保持一份是为了避免死循环

    从以上代码我们很容易就能看到,ref是利用class提供的get和set来做的操作拦截:get时收集依赖,set时派发更新

    收集依赖

(和data一样对activeEffect 作收集)

    派发更新

(和data一样,最终将触发 componentUpdateFn 作更新处理)

总结

    ref作响应式处理,其依赖的收集过程和更新派发和data是一样的,只不过data是基于proxy,而string类型又不被proxy支持,故巧借class的get和set来做了

你可能感兴趣的:(vue3源码解读--ref)