vue的reactive()和computed()的区别

`reactive()` 和 `computed()` 是 Vue 3 中的两个核心 API，用于实现响应式数据和计算属性。它们的主要区别如下：

1. `reactive()` 用于创建响应式对象，而 `computed()` 用于创建计算属性。
2. `reactive()` 返回一个响应式的对象，对该对象的任何更改都会触发视图的重新渲染，而 `computed()` 返回一个计算属性的值，只有在其依赖的响应式数据发生变化时才会重新计算该值。
3. `computed()` 可以依赖多个响应式数据，而 `reactive()` 只能依赖单个响应式对象。
4. `computed()` 可以是具有 getter 和 setter 的对象，而 `reactive()` 只能是普通的 JavaScript 对象。

总的来说，`reactive()` 和 `computed()` 是 Vue 3 中非常重要的两个 API。`reactive()` 用于创建响应式对象，让视图能够自动更新，而 `computed()` 用于创建计算属性，方便我们对响应式数据进行一些复杂的计算和操作。

相关问题

vue3 reactive 值 computed不能监听

### Vue3 中 `reactive` 值未被 `computed` 正常监听的原因分析

当遇到 `reactive` 对象中的某个属性未能触发依赖它的计算属性 (`computed`) 更新的情况时，通常是因为该属性的变化方式绕过了响应式系统的追踪机制。

#### 可能原因一：直接替换整个 `reactive` 对象
如果在代码逻辑里直接替换了由 `reactive()` 创建的对象本身而不是修改其内部属性，则新对象不会自动成为组件状态的一部分，因此也不会引起任何基于旧对象创建的计算属性重新求值[^1]。

import { reactive, computed } from 'vue'

let state = reactive({ count: 0 })
const doubleCount = computed(() => state.count * 2)

// 错误做法 - 这样做会使doubleCount失去对count变化的感知能力
state = reactive({ count: 1 }) 

console.log(doubleCount.value); // 输出仍为0而非预期的2

#### 解决方案一：仅更新现有 `reactive` 实例内的具体字段
为了确保所有相关联的计算属性都能正确反映最新的数据变动情况，在改变数值的时候应该针对具体的键名进行赋值操作，而不要轻易地重置整个反应式的容器变量。

// 正确的做法
state.count += 1;
console.log(doubleCount.value); // 现在可以得到正确的结果了

#### 可能原因二：使用原始对象代替代理后的版本
另一个常见的错误是在某些场景下不小心使用到了未经处理过的原生 JavaScript 对象实例来替代经过 `reactive()` 或者其他方法转换成具备响应特性的副本。由于前者不具备必要的 getter/setter 结构去通知框架有关变更的信息，所以自然也就无法激活相应的副作用函数执行链路[^3].

const rawState = {};
const proxiedState = reactive(rawState);

proxiedState.someKey = "value"; // 修改的是proxy上的someKey
rawState.anotherKey = "anotherValue"; // 不会影响已经建立好的响应关系网

// 使用toRaw()可获得底层的实际对象引用，但这不是推荐的操作模式
const anotherReferenceToSameObject = toRaw(proxiedState);
anotherReferenceToSameObject.yetAnotherKey = "yetAnotherValue";

#### 解决方案二：始终操作经由 `reactive()` 转换过的目标实体
保持一致性和良好的编码习惯非常重要；任何时候都应当优先考虑利用那些已经被赋予特殊行为特征的数据结构来进行交互活动，从而避免不必要的麻烦发生。

---

vue的reactive()和computed()的联系和区别

`reactive()`和`computed()`都是Vue中常用的响应式API，它们之间有联系和区别。

联系：

1. 都是Vue 3.0中新增的响应式API，用于实现响应式数据绑定。

2. 都是基于Proxy实现的。

3. 都是用于实现响应式数据的监听和计算。

区别：

1. `reactive()`用于将一个普通对象转换成响应式对象，而`computed()`用于定义计算属性。

2. `reactive()`返回一个响应式对象，`computed()`返回一个响应式的计算结果。

3. `reactive()`可以监听对象的属性的变化，`computed()`依赖于响应式数据的变化自动更新计算结果。

4. `computed()`可以接收一个getter函数和一个可选的setter函数，`reactive()`不接收任何函数。

总的来说，`reactive()`和`computed()`都是Vue响应式系统的重要部分，`reactive()`用于实现数据的监听和响应，`computed()`用于实现数据的计算和缓存，它们相互配合可以实现更加复杂的响应式功能。