在前兩篇文章中，我們學習了 Vue 的基礎和模板語法。本篇我們將深入 數據與方法，理解 data、methods、computed、watch 的作用和區別。

---

目錄

1. data
2. methods
3. computed
4. watch
5. 小結

---

data

Vue 實例中的 data 是數據源，模板會自動響應其中的變化。

<div id="app"><h2>{{ title }}</h2>
</div><script>
new Vue({el: '#app',data: {title: '歡迎學習 Vue2'}
})
</script>

當 title 改變時，頁面會自動更新。

---

methods

methods 用來定義函數，常用于事件響應。

<div id="app"><p>{{ count }}</p><button @click="increment">加一</button>
</div><script>
new Vue({el: '#app',data: {count: 0},methods: {increment: function () {this.count++}}
})
</script>

點擊按鈕時，increment 方法執行，count 更新，界面自動刷新。

---

computed 計算屬性

computed 用于定義 依賴數據的屬性，適合做基于現有數據的衍生值。

<div id="app"><p>姓：<input v-model="firstName"></p><p>名：<input v-model="lastName"></p><p>全名：{{ fullName }}</p>
</div><script>
new Vue({el: '#app',data: {firstName: '張',lastName: '三'},computed: {fullName: function () {return this.firstName + this.lastName}}
})
</script>

當 firstName 或 lastName 變化時，fullName 會自動重新計算。

特點：

• 有緩存，依賴不變時不會重新計算。
• 寫法簡潔，適合做展示。
  

---

watch 偵聽器

watch 用來偵聽數據的變化并執行邏輯，常用于 異步操作 或 復雜邏輯。

<div id="app"><p>輸入搜索關鍵詞：<input v-model="keyword"></p>
</div><script>
new Vue({el: '#app',data: {keyword: ''},watch: {keyword: function (newVal, oldVal) {console.log('搜索變化：', oldVal, '=>', newVal)// 模擬發送請求// this.fetchData(newVal)}}
})
</script>

每次輸入框內容改變時，watch 會觸發。

對比：

• computed：適合依賴數據計算值
• watch：適合執行副作用（請求、回調等）
  

---

小結

1. data：數據源，頁面綁定的核心。
2. methods：定義函數，處理事件邏輯。
3. computed：依賴數據的衍生屬性，帶緩存。
4. watch：偵聽數據變化，適合異步或副作用操作。

---

📕 下一篇文章，我們將學習 生命周期鉤子，看看 Vue 組件從創建到銷毀的全過程。