vue3的reactive与ref区别是什么?
网友回复
接收数据类型不同
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 直接取值使用