this.$set的使用场景

`this.$set` 是 Vue.js 提供的一个特殊方法，用于动态添加或修改数据对象的响应式属性。它的主要使用场景包括：

1. **对象深度添加/更新**：当你需要向已存在的响应式对象添加一个新的嵌套属性时，直接使用 `.` 号赋值会导致旧的属性丢失响应性。这时，你可以用 `$set` 来确保新属性被正确地标记为依赖，比如：

data() {
  return {
    user: { name: 'John' }
  }
}

methods: {
  addPhoneNumber() {
    this.$set(this.user, 'phone', '+1234567890');
  }
}

2. **避免触发视图更新的意外路径**：如果你在已有的非响应式对象上调用了 `.push` 或者其他改变数组长度的方法，Vue 无法跟踪到这个变化，这时可以用 `$set` 替代：

methods: {
  addItem() {
    const newItem = { id: Date.now(), value: 'New item' };
    this.items.push(newItem); // 不推荐，可能导致视图不更新
    this.$set(this.items, this.items.length - 1, newItem); // 更推荐
  }
}

3. **处理异步初始化数据**：当你需要等待某个异步操作完成后设置对象的属性时，可以先创建一个空对象然后用 `$set` 设置：

data() {
  return {
    loading: true,
    user: {}
  }
}

created() {
  axios.get('/api/user').then(response => {
    this.loading = false;
    this.$set(this.user, response.data);
  });
}