賦值後畫面卻沒更新？你聽過Vue.set()嗎

這應該是新手（我）在剛開始寫vue又要接api的時候常常踩到的坑
這是畫面的部分

<template>
{{people.name}} 
{{people.age}}
{{people.money}}

而如果data中一開始只定義了這個人的名字name跟年齡age

 data: {
    // 一開始只有寫 name 和 age 屬性
    people: {
      name: "coda",
      age: 18
    }
  },

要載入api通常會在created賦值
BUT!! 當我們在這個生命週期才想要給他一個money的屬性...

  created() {
    // call some api ...
    this.people.money = 0
  },

你會發現畫面上還是不會渲染出 {{people.money}}！

根據官方文件，Vue2會在初始實例的時候，用Object.defineProperty 把data裡的 property 全部轉為 getter/setter。看不懂沒關係，簡單來說結論：
要在一開始就寫在data裡的東西，才會是響應式的。

所以最簡單的方法就是， 在一開始就寫到data裡。
這時就想唱句江南：緣份寫在三生石上面～～ 原來冥冥之中自有安排（誤）

當然不想要一開始就寫好也可以，這時候我們就要用Vue.set()會比較靈活

  created() {
    // call some api ...
    // Vue.set(object, key, value) 記得key要用'包起來喔
    Vue.set(this.people, 'money', 81000)
  },

也可以用this.$set(object, key, value)是一樣的，如果提示沒有Vue的話，記得去import～

 import Vue from "vue";

補充：我在網路上也有爬到，如果要一次新增大量屬性的話，就用 Object.assign吧！

created () {
  // 建立新的Object來添加響應式屬性
  this.people = Object.assign({}, this.people, {
    name: 'coda',
    age: 18,
    money: 99999,
    job: 'f2e web developer',
    gender: male,
    ...
  })
}