Vue2-$set和$delete操作对象属性

在 Vue.js 中，$set 和 $delete 是用于在响应式对象上添加或删除属性的方法。

1# $set 方法

$set 方法用于向响应式对象添加新属性或修改已有属性，并确保这些属性是响应式的。

语法：this.$set(object, propertyName, value)

2.1 添加操作

// 数据对象
data() {
  return {
    isActive: true, // boolean 类型
    message: 'Hello, Vue!', // string 类型
    count: 10, // number 类型
    arr = [1, 2, 3], // 数组类型
    obj = { name: 'lee', age: 25 }, // 对象类型
  };
},

// case 1. 基本类型（ boolean、string、number）添加操作
this.$set(this, 'add', 1);
// 现在 data 对象中增加了 add 属性

// case 2. 数组类型添加操作
this.$set(this.arr, 1, 'two');
// 现在 arr 变为 [1, 'two', 3]

// case 3. 对象属性添加操作
this.$set(obj, 'gender', 'male');
// 现在 obj 变为 { name: 'lee', age: 25, gender: 'male' }

2.2 修改操作

// 数据对象
data() {
  return {
    isActive: true, // boolean 类型
    message: 'Hello, Vue!', // string 类型
    count: 10, // number 类型
    user = { 
      info: { name: 'lee', age: 25 },
      addr: { city: 'changsha', country: 'china' }
    }, // 对象类型
    fruits = ['apple', 'banana', 'cherry']  // 数组类型
  };
},

// case 1. 基本类型（ boolean、string、number）修改操作
this.$set(this, 'isActive', false);
this.$set(this, 'message', 'Hello, World!');
this.$set(this, 'count', 20);
// 现在 isActive 变为 false，message 变为 'Hello, World!'，count 变为 20

// case 2. 对象属性修改操作
this.$set(user, 'info', { name: 'lee2', age: 25, gender: 'male' });
// 现在 user.info 对象变为 { name: 'lee2', age: 25, gender: 'male' }

this.$set(this.user.addr, 'city', 'shanghai');
// 现在 user.addr 对象变为 { city: 'shanghai', country: 'china' }

// case 3, 数组属性修改操作
this.$set(fruits, 1, 'grape');
// 现在 fruits 数组变为 ['apple', 'grape', 'cherry']

2# $delete 方法

$delete 方法用于从响应式对象中删除属性，并且会触发视图的更新。

语法：this.$delete(object, propertyName)

2.1 $delete 删除属性

// 数据对象
data() {
  return {
    isActive: true, // boolean 类型
    message: 'Hello, Vue!', // string 类型
    count: 10, // number 类型
    arr = ['apple', 'banana', 'cherry'], // 数组类型
    obj = { name: 'lee', age: 25, gender: 'male' }, // 对象类型
  };
},
// case 1. 基本类型（ boolean、string、number）修改操作
this.$set(this, 'isActive');
this.$set(this, 'message');
this.$set(this, 'count');
// 现在 data 对象中删除了 isActive、message、count 属性

// case 2. 对象属性删除操作
this.$delete(obj, 'gender');
// 现在 obj 变为 { name: 'lee', age: 25 }

// case 3. 数组类型删除操作
this.$delete(arr, 1);
// 现在 arr 变为 ['apple', 'cherry']

注意：$set 和 $delete 方法应该在 Vue 组件的实例中使用，并且只能操作响应式对象（例如通过 data 创建的对象或数组）。对于普通的 JavaScript 对象和数组，直接使用赋值或删除语句即可。