Vue 的響應性

Vue 會自行觀察物件內變化，在第一時間產生 HTML 與更新 DOM。比起 jQuery 的命令式渲染，開發者只需要專注在視圖層的表現，而不需一步一步地告訴瀏覽器說「你要先做什麼，設定好，如果怎麼樣，再搬去哪裡。」聲明式渲染在 Vue 的功能下已經負責了許多背後需要處理的程序，物件變動時 data 物件中的每個屬性會自動被 getter 與 setter 代替。

【可以先知道，以後再回頭看的注意事項】
但是 Vue 實體初始化之後，只有現存屬性才有響應性。後續的程式如果直接加入新的屬性，不會具有響應性。所以至少要事先定義該你希望新增的屬性並設值為空或 undefined 。

命令式渲染與聲明式渲染的概念差異

• 命令式渲染 - 我一步一步告訴程式去哪裡、拿什麼資料出來、如果觀測到資料變化、再放到哪裡去
• 聲明式渲染 - 我覺得程式應該要做到什麼，程式直接做出效果就好

再舉個更生活化一點的例子

• 命令式渲染 - 請你去倉庫拿顆精靈球，擺在店裡的桌上，如果觀測到有客人想買，跟他收取 200 遊戲幣，你再把桌上這顆精靈球給他
• 聲明式渲染 - 請你做精靈球的銷售，售價 200 遊戲幣

「一顆抓不到？那就買十顆！」

樣板與資料

讓我們先看第一個 Vue 實體範例，結構部分於後續詳解。

<div id="app">
  <p>歡迎來到{{ shopName }}！</p>
  <p>現在買 {{ onSaleAmount }} 顆{{ ball[0] }} 
    <span style="color:red">送 1 顆{{ ball[3] }}！</span>
  </p>
</div>

var vm = new Vue({ 
  el:'#app', 
  data:{ 
    shopName: '友好商店',
    onSaleAmount: 10,
    ball: ['精靈球','超級球','高級球','紀念球']
  }
})

瀏覽器上的呈現效果如圖。第一個引起人注意的應該是， HTML 並不會寫出「歡迎來到{{ shopName }}」，而是依據 Vue 實體中的資料，透過插值的方式，成為對應的字串「友好商店」。

HTML 中的樣板（templates）

Vue 會將實體內的資料呈現在網頁上。這需要透過必要的結構一起合作。
第一個必要的結構是 HTML 的樣板。

<div id="app"> <!-- 樣板（templates） -->
    ...
</div>

HTML 依然提供鷹架的工作，而要讓 Vue 來操作這鷹架上的內容時，應給予 id 的識別與綁定。

Vue 實體與其中的資料（data）

var vm = new Vue({ // 宣告一個 vue 實體。
  el:'#app',
  data:{
    ...
  }
})

• Vue實體 - 若無重要目的，通常以 vm 或 app 宣告， vm 代表 viewmodel
• el - 綁定 HTML 檔的標籤，這說明「 HTML 裡 id 為 app 的 div 由我來操控」；反過來說，id 不是 app 的 div 都不歸我這個 Vue 實體操作。
• data - 資料，是一個物件，負責我們在樣板的插值中想顯示的資料，插值以雙大括號寫在 HTML 中，並與 data 中的同名對應屬性單向綁定。屬性可以賦予各種型別的值：數值（10）、字串（友好商店）、布林值、陣列（各種精靈球）、物件都是可行的。

這是 Vue 實體最低限度、必要的結構，但精華在於透過指令操作實體中的資料，讓網頁依據條件判斷與呈現不同的內容。往後篇章會詳述指令的部分。

回到友好商店的 app 示例。如果今天中秋節，友好商店決定推出促銷活動：「中秋快閃活動購物送好禮急速手刀搶購優惠中，買 8 顆精靈球改送 1 顆超級球。」我必須做在文件中達成以下效果。

1. 優惠達標的門檻的從 10 顆改成 8 顆
2. 紀念球 改成 超級球

<div id="app">
  <p>歡迎來到{{ shopName }}！</p>
  <p>現在買 {{ onSaleAmount }} 顆{{ ball[0] }} 
    <span style="color:red">送 1 顆{{ ball[1] }}！</span>
    <!-- 從 ball 陣列的值中的第 4 個元素改成第 2 個元素（ball[3] 改成 ball[1]）-->
  </p>
</div>

var vm = new Vue({ 
  el:'#app', 
  data:{ 
    shopName: '友好商店',
    onSaleAmount: 8, /* 從 10 改成 8 */
    ball: ['精靈球','超級球','高級球','紀念球']
  }
})

• {{ onSaleAmount }}與 data 中 onSaleAmount 單向綁定
• {{ ball[1] }}指向 data 中 ball 陣列的第 2 個元素

有了結構上的認識之後，往後就可以透過指令、methods與計算屬性，做更多資料的操控。
今天的程式碼在這個 codepen 裡，此文諸多不周到的地方還請各方大大多多包涵指教。

「祝大家中秋節快樂～」