VUE reactive 变量赋值

在 Vue.js 中，可以使用 `Vue.set` 或 `this.$set` 方法来设置响应式变量的值。

例如，假设我们有一个名为 `data` 的响应式变量，我们可以这样设置它的值：

// 使用 Vue.set
Vue.set(this.data, 'name', 'Tom');

// 使用 this.$set
this.$set(this.data, 'name', 'Tom');

这里的 `data` 是一个 Vue 组件的 data 选项中定义的响应式对象，`name` 是它的属性名，`Tom` 是要设置的属性值。

使用 `Vue.set` 或 `this.$set` 方法设置响应式变量的值时，会自动触发组件的重新渲染，从而更新界面上绑定该变量的视图。

相关问题

vue3的reactive重新赋值

### 更新 Vue 3 中 `reactive` 定义的状态

在 Vue 3 中，通过 `reactive` 创建的对象是响应式的。为了更新这些对象的属性并保持其响应性，有几种推荐的方法。

#### 使用点语法直接设置新值
可以直接使用点运算符来更改现有属性的值：

let obj = reactive({
    name: 'zhangsan',
    age: '18'
});
obj.name = "lisi";
console.log(obj); // 输出 {name: "lisi", age: "18"}

这种方法适用于已存在的键[^1]。

#### 添加新的反应式属性
如果要向 `reactive` 对象添加一个新的属性，则应先将其声明为空或默认值，在创建时就定义好所有可能使用的字段可以避免不必要的复杂度；但如果确实需要动态增加属性，可借助于 `Vue.set()` 或者 ES6 的方式实现：

// 假设初始状态未包含 address 属性
obj.address = {}; 
// 这样做不会触发视图更新，因为它是非反应性的新增加项

// 正确的做法应该是这样：
const newObj = {...obj, address:{}};
Object.keys(newObj).forEach(key => {
    set(obj,key,newObj[key]);
})

不过需要注意的是，在大多数情况下最好提前规划好数据结构，尽量减少运行期间改变对象形状的需求。

#### 替换整个嵌套对象
当涉及到更复杂的场景比如替换掉一个深层级的对象而不是仅仅修改单个属性的时候，可以通过覆盖的方式来进行操作而不需要逐个重置内部成员变量：

let nestedObj = reactive({
    user:{
        id:1,
        info:{}
    }
});

nestedObj.user.info={email:"example@example.com"};
// 上述做法会正常工作并且维持住用户的其他信息不变的同时只改变了 email 字段

// 如果想要完全替换成另一个不同的用户资料则这样做：
nestedObj.user={
    ...anotherUserObject
};  

对于简单的扁平化对象而言，也可以考虑采用 `Object.assign()` 来批量更新多个属性：

let flatObj = reactive({});
Object.assign(flatObj,{
    keyA:'valueA',
    keyB:'valueB'
});    

这种方式能够一次性处理多条记录而不必逐一指定每一个待变更项目[^2]。

vue3接口赋值用ref还是reactive

### Vue3 中 `ref` 和 `reactive` 在接口赋值时的区别

当处理来自接口的数据并将其绑定到组件状态时，选择使用 `ref` 或者 `reactive` 取决于数据结构以及开发者的偏好。

对于基本类型（如字符串、数字），推荐使用 `ref` 来创建响应式的变量。这是因为 `ref` 提供了一种简单的方式来包裹原始值，并允许开发者通过 `.value` 访问或修改这些值[^1]。

import { ref } from 'vue';

const fetchData = async () => {
    const response = await fetch('/api/data');
    const result = await response.json();
    const numberValue = ref(result.number); // 使用 ref 处理基础数值
};

然而，在面对复杂的数据结构比如对象或者数组时，则更适合采用 `reactive` 。这不仅因为 `reactive` 更高效地管理嵌套属性的变化通知机制，还因为它不需要额外的 `.value` 属性来读取/写入数据[^2]。

import { reactive } from 'vue';

const fetchData = async () => {
    const response = await fetch('/api/data');
    const result = await response.json();
    const complexData = reactive(result.complexObject); // 使用 reactive 对象
};

值得注意的是，如果向 `ref()` 传入一个已经存在的引用类型（例如对象或数组），内部会自动调用 `reactive()` 将其变为深层响应式实体[^4]。因此在这种场景下两者功能上趋于一致，只是语法糖不同而已。

### 接口赋值的最佳实践建议

为了保持一致性并且简化代码逻辑，通常可以根据预期接收的数据形式决定：

- 如果知道返回的结果是一个单一的基础类型值（像整数、布尔等），则可以考虑使用 `ref`；
- 当预计获取的对象含有多个字段或者是列表集合等形式时，优先选用 `reactive`；

这样做既能够充分利用各自的优势特性，又能在团队协作过程中减少不必要的混淆。