vue $set用法

1、问题：vue双向绑定失效时

vue存在数据双向绑定失效的情况

1.1 vue官网中提到的数组的变动

数组是引用数据类型

1.2 vue不能检测到对象属性的添加或删除

<template>
  <div>
    <span>{{ obj }}</span>
    <br />
    <button @click="changeObj">obj</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj: {
        a: 1,
      },
    };
  },
  changeObj() {
    this.obj.b = 2;
    console.log("obj", this.obj);
  },
};
</script>

2、问题解析

2.1 vue初始化实例

vue初始化实例的时候将属性转为getter/setter，后期对象属性的添加和删除，vue并不能检测到。对象的属性必须在data对象上vue才能转换，也就是成为响应式的。

2.2 vue为什么不能检测到对象属性的添加或删除

因为vue只能检测到对象的地址有变化的情况，地址没有改变，vue就不能实现数据的双向绑定。

2.3 地址变化

基本数据类型保存在栈中，引用数据类型的值保存到堆内存中的对象，变量（栈）中保存的实际上是一个指针，这个指针指向内存中的另一个位置，该位置保存着对象。
例如，对象的添加只是对原有对象的地址指向的堆内存中的对象进行添加，此时地址并未改变，所以vue检测不到。

3 解决方法

$set使用方法

   this.$set(原数组, 索引值, 设置值);

3.1 vue检测不到对象属性的添加或删除

1）添加单个属性可以使用$set
2）添加多个数据可以使用Object.assign()
实例如下：

<template>
  <div>
    <span>{{ obj }}</span>
    <br />
    <button @click="changeObj">obj</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj: {
        a: 1,
      },
    };
  },
  changeObj() {
    this.obj.b = 2;
    this.$set(this.obj, "c", 3);
    this.obj = Object.assign({}, this.obj, {
      age: 27,
      name: "li",
    });
    console.log("obj", this.obj);
  },
};
</script>

3.2 解决检测不到数据的变动

1）利用所引值来设置数据项时

this.$set(this.arr, 5, 6);

2）修改数组的长度
如果加长可以通过$set设置数组最后一项来改变长度
如果削短可以使用splice