watch监听一个对象中的属性 - Vue篇

在Vue中，你可以使用watch属性来监听组件中数据的变化。以下是一个简单的例子，展示了如何使用Vue的watch来监听对象中的属性：

<template>
  <div>
    <p>{{ userInfo.name }}</p>
    <input v-model="userInfo.name" placeholder="Enter name">
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      userInfo: {
        name: 'Alice',
        age: 25
      }
    };
  },
  watch: {
    'userInfo.name': {
      immediate: true, // 如果需要在组件实例化时立即触发，设置immediate为true
      handler(newVal, oldVal) {
        console.log(`Name changed from ${oldVal} to ${newVal}`);
        // 这里可以添加你需要执行的代码
      }
    }
  }
};
</script>

在这个例子中，我们定义了一个名为userInfo的对象，其中包含name和age两个属性。我们使用watch来监听userInfo.name的变化。当输入框中的内容变化时，watch的handler函数会被触发，并输出一条日志。immediate属性设置为true，意味着组件在被创建时立即监听这个属性。