vue 中 $set 的作用解析

在 Vue.js 开发中，$set 是一个非常重要且实用的方法。理解它的作用，对于开发者处理复杂的数据响应式更新有着极大的帮助。

Vue 的数据响应式原理是通过 Object.defineProperty() 方法来实现的。当一个 Vue 实例创建时，Vue 会遍历 data 选项中的所有属性，使用 Object.defineProperty() 将这些属性转换为 getter/setter。这使得当这些数据发生变化时，Vue 能够自动更新与之绑定的 DOM 元素。

然而，在某些情况下，直接对对象新增属性或者修改数组长度等操作，Vue 无法检测到变化。例如，我们创建一个简单的 Vue 实例：

<template>
  <div>
    <p>{{obj.message}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {}
    };
  },
  mounted() {
    // 直接添加属性，Vue 无法检测到变化
    this.obj.message = 'Hello';
  }
};
</script>

在上述代码中，直接为 obj 添加 message 属性，Vue 不会自动更新 DOM 显示新添加的内容。

这时，$set 就发挥作用了。$set 方法的作用就是向一个响应式对象中添加一个新属性，并确保这个新属性同样是响应式的，能触发视图更新。语法为：Vue.$set(target, propertyName/index, value)。

我们修改上述代码：

<template>
  <div>
    <p>{{obj.message}}</p>
  </div>
</template>

<script>
import Vue from 'vue';
export default {
  data() {
    return {
      obj: {}
    };
  },
  mounted() {
    // 使用 $set 添加属性，Vue 能检测到变化
    Vue.$set(this.obj,'message', 'Hello');
  }
};
</script>

这样，通过 $set 添加的 message 属性就具备了响应式，DOM 也会随之更新显示新内容。

对于数组也是同理。比如，我们直接修改数组的长度：

data() {
  return {
    list: [1, 2, 3]
  };
},
mounted() {
  this.list.length = 1; // Vue 无法检测到这种变化
}

若要让 Vue 检测到数组长度的变化，同样可以使用 $set：

import Vue from 'vue';
data() {
  return {
    list: [1, 2, 3]
  };
},
mounted() {
  Vue.$set(this.list, 2, 4); // 这里修改数组指定位置的值，Vue 能检测到变化
}

$set 是 Vue 中处理数据响应式更新不可或缺的方法，开发者在遇到 Vue 无法检测数据变化的情况时，应想到使用 $set 来确保数据的响应式更新，从而实现页面的正确渲染与交互。