vue3的set方法|极客教程

vue3的set方法

在Vue.js中，我们经常需要对数据进行修改或更新。对于对象而言，我们通常会使用Vue.set方法来添加新的属性或更新现有属性。然而，在Vue3中，Vue.set方法已经被废弃，取而代之的是set方法。本文将详细介绍Vue3中的set方法的使用方式及其特性。

set方法的基本用法

在Vue3中，我们可以通过set方法来修改或更新对象的属性。其基本语法如下：

import { reactive, set } from 'vue';

const obj = reactive({
  name: 'Alice',
  age: 25
});

set(obj, 'name', 'Bob');
console.log(obj.name); // 输出 'Bob'

上面的代码中，我们首先使用reactive函数创建了一个响应式对象obj，然后通过set方法修改了obj对象的name属性的值为’Bob’。最终输出obj.name的结果为’Bob’。

set方法的特性

1. 动态新增属性

除了修改现有属性，set方法还可以用来动态新增属性。下面是一个示例：

import { reactive, set } from 'vue';

const obj = reactive({
  name: 'Alice',
  age: 25
});

set(obj, 'gender', 'female');
console.log(obj.gender); // 输出 'female'

上面的代码中，我们使用set方法动态为obj对象添加了一个gender属性，并将其值设置为’female’。

2. 处理嵌套对象

set方法还可以用于处理嵌套对象。例如：

import { reactive, set } from 'vue';

const obj = reactive({
  info: {
    name: 'Alice',
    age: 25
  }
});

set(obj.info, 'name', 'Bob');
console.log(obj.info.name); // 输出 'Bob'

在这个示例中，我们使用set方法修改了obj对象的info属性下的name属性的值为’Bob’。

3. 避免响应式对象的属性丢失

在Vue2中，直接给响应式对象赋值不存在的属性会导致属性丢失。而在Vue3中，使用set方法可以避免这个问题。例如：

import { reactive, set } from 'vue';

const obj = reactive({
  name: 'Alice',
  age: 25
});

obj.username = 'alice'; // 直接赋值
console.log(obj.username); // 输出 'alice'

set(obj, 'username', 'alice'); // 使用set方法
console.log(obj.username); // 输出 'alice'

上面的代码中，我们分别直接给obj对象赋值和使用set方法给obj对象添加了一个username属性。可以看到，直接赋值会导致属性丢失，而使用set方法则不会。