当前位置：首页 > news >正文

ref对比reactive

news 2025/11/7 9:39:02

ref对比reactive

宏观角度上来看：

ref用来定义基本类型数据和对象类型数据；
reactive用来定义对象类型数据；

区别

ref创建的变量必须使用.value，当然有一些插件也可以自动添加.value；reactive就可以直接使用
reactive重新分配一个新对象，就会失去响应式（可以使用Object.assign去整体替换来保持响应式）；ref重新赋值的话，仍然会保持响应式；

举例

<template><div><h2>reactive vs ref 重新赋值对比</h2><div><h3>reactive 示例</h3><p>用户名: {{ reactiveUser.name }}</p><p>年龄: {{ reactiveUser.age }}</p><button @click="updateReactiveProperty">更新属性（正常）</button><button @click="wrongReassignReactive">错误重新赋值（失去响应式）</button><button @click="correctReassignReactive">正确重新赋值（保持响应式）</button></div></div>
</template><script setup>
import { ref, reactive } from 'vue'const reactiveUser = reactive({name: '张三',age: 25
})const refUser = ref({name: '张三', age: 25
})const updateReactiveProperty = () => {reactiveUser.name = '李四'reactiveUser.age = 30
}//下面这样是错误的写法，这样会失去响应式
const wrongReassignReactive = () => {reactiveUser =  {name: '王五',age: 35}
}//下面这样是正确的写法，这样会保持响应式
const correctReassignReactive = () => {Object.assign(reactiveUser, {name: '王五',age: 35})
}// ref
const updateRefProperty = () => {refUser = {name: '李四',age: 30}
}</script>

在这里插入图片描述

当我们使用reactive的时候，我们可以修改对象里面的属性，这没有问题，但是如果我们想直接修改这个对象，如果不使用Object.assign的话，就会失去响应式；
当我们使用ref的时候，我们可以直接对对象进行分配这样也不会失去响应式

Object.assign是个什么东西？

Object.assign本身是一个JavaScript的方法，可以用于合并对象。
其实使用Object.assign，就是对属性的一个替换，只是它可以直接逐个的替换对象的属性；所以它也是动了属性，并没有动对象的引用；
我们知道reactive返回的是一个proxy,如果我们修改proxy里面的属性，会被VUE监听到，所以我们的视图会进行更新，而Object.assign并没有动Proxy对象本身，而是对于其属性进行逐步更改