vue3源码解析——ref和reactive定义响应式的区别

refreactive 是 Vue 3.0 中用于定义响应式数据的两个新 API。它们有以下区别:

ref 定义单个响应式数据

  • 数据类型可以是任意类型。它通常用于定义原始数据类型为响应式数据。
  • 返回一个响应式对象,该对象包含一个 .value 属性,可用于获取和设置数据。
  • 底层采用Object.defineProperty()实现

reactive 定义多个响应式数据

  • 数据类型必须是对象
  • 返回一个响应式对象,必须使用响应式对象来获取属性和设置数据
  • 底层采用的是new Proxy()

reactive源码解析

reactive 函数可以用来创建一个响应式的对象,它会在内部使用 Proxy 对对象的 getter 和 setter 进行拦截,从而实现对数据的依赖收集和通知更新。

在vue3源码里,reactive的实现在core-main\packages\reactivity\src\reactive.ts文件中

 reactive是一个函数,接收传入的target对象。返回一个createReactiveObject方法。

 reactive的核心逻辑在createReactiveObject方法中。

  • 首先校验传入的target必须是对象;
  • 通过new Proxy创建一个代理对象,根据对象的类型走不同的handler处理逻辑;
  • 返回代理对象proxy

proxy是怎么代理的?

手写一个简易的reactive,看下handler里是什么

  let handler = {
    //拦截整个对象,访问对象的属性时get拦截器触发
    get(target, key) {
### Vue3 中 `ref` `reactive` 的响应式实现原理 #### 一、Vue3 响应式的整体机制 Vue3 使用了一种基于 Proxy 的全新响应式系统,取代了 Vue2 中的 Object.defineProperty 方法。Proxy 提供了一个更强大灵活的方式来拦截对象的操作行为[^1]。 当通过 `ref` 或 `reactive` 定义一个响应式变量时,Vue3 实际上会利用 JavaScript 的 Proxy 来追踪这些变量的变化,并在变化发生时通知视图更新。 --- #### 二、`ref` 的响应式实现原理 `ref` 是用来定义基本类型的响应式数据的一种方式。它内部实际上是一个包装器,将传入的值存储在一个带有 `.value` 属性的对象中。这样做的目的是为了使该值可以被检测到其变更。 以下是其实现的关键点: - 当调用 `ref(value)` 时,如果传递的是一个对象,则会自动将其转换为 `reactive` 类型;如果是原始类型(如字符串、数字等),则保持不变。 - 在模板或其他地方访问 `ref` 数据时,Vue 自动解包 `.value`,使得开发者无需显式书写 `.value` 即可获取实际值[^3]。 代码示例展示如何使用 `ref` 并观察其工作流程: ```javascript import { ref } from 'vue'; const count = ref(0); // 创建一个 ref 对象 console.log(count.value); // 输出初始值 0 count.value++; // 修改 .value 属性触发响应式更新 console.log(count.value); // 输出修改后的值 1 ``` --- #### 三、`reactive` 的响应式实现原理 `reactive` 主要用于处理复杂的嵌套对象结构。它的核心是通过 Proxy 拦截对对象属性的各种操作(读取、设置、删除等)。具体来说: - 调用 `reactive(obj)` 后返回的新对象是对原对象的一个代理版本。 - 如果尝试访问或更改此代理对象上的任何属性,都会触发相应的 getter setter 钩子函数。 - 这些钩子函数负责记录依赖关系以及后续的通知过程。 下面是一段简单的例子说明 `reactive` 的功能: ```javascript import { reactive } from 'vue'; const state = reactive({ name: 'Alice', age: 25, }); state.age += 1; // 更改年龄属性触发响应式更新 console.log(state.name, state.age); // 打印 Alice 新的年龄值 ``` 需要注意的一点是,由于 `reactive` 返回的是一个新的代理实例,因此不能直接对其源对象进行赋值或者比较相等问题。 --- #### 四、两者的对比分析 尽管两者都服务于相同的最终目标——建立响应式链接,但在某些方面存在差异: - **适用范围**: - `ref`: 推荐用于简单基础类型的数据声明; - `reactive`: 更适合管理具有多层嵌套特性的复杂状态树。 - **性能开销**: - `ref` 添加额外一层封装 (`.value`) ,可能稍微增加内存消耗; - `reactive` 则直接作用于整个对象层次之上,通常效率更高一些。 总结而言,在选择工具之前应该考虑具体的业务需求个人偏好等因素再做决定。 --- ### 结论 无论是采用 `ref` 抑或是 `reactive` 方式来构建应用中的动态交互逻辑,背后均依托着强大的 Proxy 技术支持完成高效的双向绑定效果。理解清楚各自的特性有助于我们写出更加优雅简洁且易于维护的应用程序代码[^2]。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

像素棱镜

你的鼓励将是我前进的动力。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值