回到技术博客

Vue3源码:ref响应式原理

在createApp中,传入的rootComponent是一个和选项式API不同的参数,也就是setup

ref原理

RefImpl实例化响应式变量

组合式和选项式的差异就是,组合式在代码编译过程成进行响应化构建,选项式直接传入data“选项”进行构建,

可以看到本质上ref的响应初始化还是通过reactive来执行的(可以回到这篇文章看reactive的响应化原理:https://www.yuque.com/wztlink1013/blog/iy7gxmvmskcnwupd

[!NOTE]

在Reactive中,也不是一股脑进行响应式构建,而是通过判断是否为对象,再决定是否需要用reactive进行响应化。所以这是为什么推荐如果是非对象数据结构用ref,对象数据结构用reactive的原因。但是用ref使用比reactive方便的原因是其自身对get和set的判断用法,可以看到在set方法中,还能看到toReactive的判断执行ref需要通过后缀.value是因为不管访问还是设置,只有对其属性操作才能触发get和set

— 写于生活,留给未来 —

最后更新于 2024-12-13

树下留言

LET’S TALK

文字是一次相遇。很高兴听到你的声音。

评论加载中…