Vue 是一个非常强大的前端框架，它可以帮助我们更快、更方便地构建 Web 应用程序。其中一个非常有用的功能就是它的数据监听机制。当一个 Vue 实例的某个属性被改变时，所有依赖该属性的地方都会自动更新。这意味着我们不必手动更新 DOM，节省了很多工作量。

Vue 提供了各种不同的方式来监听数据变化，下面是其中一些常用的方式。

// 1. watch
// 这是 Vue 最基本的监听方式。我们可以使用 watch 来监听某个属性的变化，并在变化时执行一些操作。

data() {
  return {
    count: 0
  }
},
watch: {
  count(newValue, oldValue) {
    console.log('count 发生了变化：', newValue, oldValue)
  }
},
methods: {
  add() {
    this.count++
  }
}

// 2. computed
// computed 是一种特殊的监听方式。我们可以在 computed 中定义一些计算属性，当依赖的属性变化时，它会自动重新计算并更新。

data() {
  return {
    width: 100,
    height: 200
  }
},
computed: {
  area() {
    return this.width * this.height
  }
}

// 3. v-model
// v-model 也是一种比较常用的监听方式。它可以将表单元素和 Vue 实例的属性双向绑定起来。

data() {
  return {
    message: ''
  }
}

<input v-model="message" />