Vue3 中 reactive 和 ref 的区别主要在于:
reactive 用来处理对象(Object) 和 数组(Array)
示例代码:
reactive定义的数据,直接取值使用
示例代码:
js
i
接收数据类型不同
ref 用来处理基本类型数据,如:字符串、数值、布尔值等reactive 用来处理对象(Object) 和 数组(Array)
示例代码:
// 基础类型使用ref
const name = ref('张三')
// 对象或数组使用reactive
const user = reactive({
name: '李四',
age: 20
})
原理不同
ref 用来包装基本类型数据,内部通过对象存储值并返回代理对象reactive 通过 Proxy 实现对对象属性的响应式追踪
使用方式不同
ref定义的数据,在模板中要加 .value 后缀取值reactive定义的数据,直接取值使用
示例代码:
<template>
<div>{{ name.value }}</div>
<div>{{ user.name }}</div>
</template>
js
i
mport { ref, reactive } from 'vue'
export default {
setup() {
const name = ref('张三')
const user = reactive({ name: '李四' })
return {
name,
user
}
}
}传递方式不同
ref 定义的数据,在模板中使用要用 .value 取值,但在 <script> 中可以直接用不加 .valuereactive 定义的数据,在任何地方都直接取值使用
总结:
ref 处理基础类型数据,reactive 处理对象或数组
ref 通过对象存储值返回代理,reactive 通过 Proxy 实现响应式
ref 在模板中需要加 .value 后缀取值,reactive 直接取值使用网友回复
我知道答案，我要回答
私活外包
最新提问
有没有免费让ai自动帮你接管操作电脑的mcp服务？
mcp为啥用Streamable HTTP 替代 HTTP + SSE？
scratchjr有没有开源的前端html网页版本源代码？
多模态大模型能否根据ui交互视频来来模仿写出前端交互动画效果ui代码？
如何用阿里云oss+函数计算fc+事件总线EventBridge+消息队列+数据库+redis缓存打造一个高并发弹性系统？
阿里云函数计算 FC如何在海外节点搭建一个代理网络？
ai studio中gemini build的代码如何发布到github pages等免费网页托管上 ？
如何在cursor、qoder、trae中使用Claude Skills功能？
有没有不用u盘就能重装系统的开源工具？
python如何固定摄像头实时计算停车场停车位剩余数量？
