一.什么是$set

要明白什么是set我们就先要了解vue的数据双向绑定的原理，VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。
如果要给对象添加新的属性，此时新属性没有进行过上述过程，不是响应式的，所以会出想数据变化，页面不变的情况。此时需要用到$set。

二.具体应用

<!-- vue中$set的用法 -->
<template>
  <div>
    <h6>$set的用法</h6>
    <div>
      姓名：{{ userInfo.name }}
      <br />
      年龄：{{userInfo.age}}
      <br />
      性别：{{userInfo.sex}}
      <br />
      说明：{{userInfo.info.content}}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: "简书",
        age: "3",
        info: {
          content: "my name is test",
        },
      },
    };
  },

  components: {},

  computed: {},

  mounted() {
    console.log("this:", this);
    this.$set(this.userInfo, "sex", "男");
  },

  watch: {},

  methods: {},
};
</script>
<style>
</style>

在属性定义中，我们并没有定义userInfo的sex属性，之后我们又想添加属性在渲染中使用，但是此时我们没有再重新渲染整个页面，在触发方法中这样使用即可。this.$set(this.userInfo, “sex”, “男”);