在前两篇文章中，我们学习了 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 组件从创建到销毁的全过程。