[Vue.js] 資料響應, 資料改變且重新渲染

假設我們有一個購物網站, 需要在頁面上顯示購物車裡的商品數量

<p> {{goods.count}} </p>

而這筆資料會在使用者操做 Add 按鈕後,產生變化

要實作這個功能很簡單, 將按鈕綁定我們addCount()方法, 並在方法內修改goods.count就能達到我們目的　

<button @click="addCount()"> Add </button>

...

export default

     data() {

  return {

  goods:

{

count: 0

}

  }

  }

     methods: {

          addCount(){

               this.goods.count ++;

          }

     }

基本上Vue會把定義在data()裡的屬性(property)轉換成getter/setter　

當setter被觸發時會告知組件相對應的watcher進行重新渲染

這也就是為什麼資料一旦更變, 頁面就會自動被更新的原因

但如果屬性是動態地被加上去的話, 

<p> {{goods.cost}} </p>

...

export default

  data() {

  return {

  goods:

{

count: 0

}

  }

  }

  methods: {

  addCount(){

        this.goods.count ++;

        this.cost =    this.goods.count * 100;

  }

  }

上面的程式碼就會有問題, 

因為在這種情況下cost並沒有被加入響應, 所以watcher根本不知道cost有改變

此時必須用以下的語法來手動加入響應

Vue.set( this.goods, 'cost', this.good *100)

完整語法如下

export default

  data() {

  return {

  goods:

{

count: 0

}

  }

  }

  methods: {

  addCount(){

        if(!this.goods.cost) {

          Vue.set(this.goods, 'cost', 0);

        }

        this.goods.count ++;

        this.goods.cost = this.goods.count * 100;  

  }

  }