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>