vue - 数据改变页面不刷新

当vue中data里声明或者已经赋值过的对象、数组时，向对象中添加新的属性，如果更新此属性的值，页面不会更新视图。

举个栗子：当我点击按钮想要改变message中的值时

<template>
  <div>
    <span>{{ message }}</span>
    <button @click="addMessage">addMessage</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: {
        a: 0,
      },
    };
  },
  methods: {
    addMessage() {
      this.message.b = 1;
    },
  },
};
</script>

此时当我点击按钮，页面并不会发生改变。

官方定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。　

Vue官方文档给我们提供了两种方法：Vue.set()和this.$set()

两种方法作用一样，参数也是一致的。

区别：Vue.set 可以设置实例创建之后添加的属性，而this.$set只能设置实例创建后存在的属性

<template>
  <div>
    <span>{{ message }}</span>
    <button @click="addMessage">addMessage</button>
  </div>
</template>

<script>
import Vue from 'vue';
export default {
  data() {
    return {
      message: {
        a: 0,
      },
    };
  },
  methods: {
    addMessage() {
      //   this.message.b = 1;
      //   this.$set(this.message, 'b', 1);
      Vue.set(this.message, 'b', 1);
    },
  },
};
</script>