如何在 Vue 中观察道具中的变化

在 Vue 中，父组件可以通过属性将数据传递给子组件作为道具。有时，我们可能需要在子组件中监听道具的变化以做出相应的反应。

1. 监听道具的变化

在子组件中使用 watch 监听道具的变化是一种简单有效的方法。以下是一个简单的示例：

<template>
  <div>
    <p>我的名字是：{{name}}</p>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    }
  },
  watch: {
    name: function(newVal, oldVal) {
      console.log('我的名字从 ' + oldVal + ' 变为了 ' + newVal)
    }
  }
}
</script>

在这个例子中，子组件监听了道具 name 的变化，并在控制台中打印变化的值。

2. 使用计算属性

另一种常用的方法是使用计算属性。计算属性根据道具的值计算一个新值，并返回它。当道具的值发生变化时，计算属性会重新计算。

以下是一个示例：

<template>
  <div>
    <p>我的年龄是：{{age}}</p>
  </div>
</template>

<script>
export default {
  props: {
    birthyear: {
      type: Number,
      required: true
    }
  },
  computed: {
    age: function() {
      var currentYear = new Date().getFullYear()
      return currentYear - this.birthyear
    }
  }
}
</script>

在这个例子中，子组件将 birthyear 作为道具，并在计算属性中计算它对应的年龄。

3. 使用 $watch 方法

Vue 实例提供 $watch 方法，可以用于监听道具或数据的变化。以下是一个示例：

<template>
  <div>
    <p>我的爱好是: {{hobbies}}</p>
  </div>
</template>

<script>
export default {
  props: {
    hobbies: {
      type: Array,
      required: true
    }
  },
  mounted() {
    this.$watch('hobbies', function(newVal, oldVal) {
      console.log('我的爱好从 ' + oldVal.toString() + ' 变为了 ' + newVal.toString())
    })
  }
}
</script>

在这个示例中，子组件使用 $watch 方法监听了道具 hobbies 的变化。

以上就是在 Vue 中观察道具变化的三种方法。无论哪一种方法，都可以有效地让子组件做出相应的反应。