当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值，但是遇到以下情况不会进行数据的双向绑定。

• 当你利用索引直接改变一个数组项时；例如：vm.arr[index] = value;
• 当你修改数组长度时；vm.arr.length = value;

当数据没有被双向绑定的时候，我们就需要使用set了;

<template>
  <div>
    <ul>
      <li v-for="value in user" :key="value">{{ value }}</li>
    </ul>
    <button @click="add">添加属性</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: "哈利波特",
      },
    };
  },
  methods: {
    add() {
      this.user.sex = "男";
      console.log(this.user)
    },
  },
};
</script>

点击button会发现，obj.b已经成功添加，但是视图层未刷新。这是因为在vue实例创建时，obj.b并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新，这时就需要使用Vue的全局api——$set()了；

        add() {
            this.$set(this.user,'sex','女')
        },

$set()方法相当于手动的去把user.sex处理成一个响应式的属性，此时视图也会跟着变了；