在Vue中为什么有$set这个api？

在Vue中，如果想实现数据的双向绑定有几种方式： 最常见的就是把数据放在data中，然后template去绑定这个数据，这样就实现了双向绑定。

 

有的时候我们会发现，明明在template中绑定了这个属性 console.log 出来也是有的，但页面上就是显示不出来。

 

例如： 点我运行下面代码

<template>
  <div class="hello">
    <h1>{
  { msg }}</h1>
    <pre> {
  { obj.c }} </pre>
    <br>
    <button @click="addOne">点我+1</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: { msg: String },
  data() {
    return {
      obj: {
        a: 1,
        b: 2
      }
    };
  },
  watch: {
    obj: {
      handler: function(newV) {
        console.log("我发生变化了", newV);
      }
    }
  },
  methods: {
    addOne() {