在前两篇文章中，我们学习了 Vue 的基础和模板语法。本篇我们将深入 数据与方法，理解 data、methods、computed、watch 的作用和区别。

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>