toRaw()、reactive()以及ref和reactive的区别

本文比较了Vue的ref和reactive两种数据绑定方式,强调了ref处理基本类型和对象的区别,ref使用RefImpl实现数据劫持,reactive依赖Proxy,强调了它们在访问方式、可变性和监听行为上的差异。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<script setup lang="ts">
import {reactive, toRaw, isReactive} from "vue"

const state = { count : 1}

const reactiveState = reactive(state)

console.log( toRaw(reactiveState) === state ) // true


isReactive(toRaw(reactiveState))  // false


</script>

toRaw 根据vue创建的代理返回其原始对象, reactive根据原始对象创建一个vue代理。

在此总结ref与reactive的区别:

1. ref能同时处理基本数据类型和对象,而reactive只能处理对象。

ref是通过一个中间对象RefImpl持有数据,并重写它的set和get方法实现数据劫持的,本质上是通过Object.defineProperty对RefImpl的value属性进行劫持。

reactive则是通过Proxy进行劫持的,Proxy无法对基本数据类型进行操作。

2. ref需要通过value属性间接的访问数据,(在templates中vue做了自动展开),而reactive可以直接访问。

3. 可以给ref的值重新分配给一个新对象,而reactive只能修改当前代理的属性,否则会破坏响应性。

4. ref()在原始数据为Object类型时,会通过reactive包装原始数据后再赋值给_value。

5. watch()默认情况下只监听ref的value,而对reactive执行深度监听。

参考链接:Vue中ref()和 reactive() 的区别_ref,reactive-优快云博客

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值