如何使用`watch`选项来监听特定属性的变化？

在 Vue 中，可以使用watch选项来监听特定属性的变化。如果需要监听对象obj中的属性a的变化，可以使用以下代码：

<template>
  <div>
    <input type="text" v-model="obj.a" @input="handleInput" />
    <input type="text" v-model="obj.b" @input="handleInput" />
    <p>{
  { obj }}</p>
  </div>
</template>

<script>
export default {
    
  data() {
    
    return {
    
      obj: {
     a: '', b: '' },
    };
  },
  watch: {
    
    'obj.a': {
    
      handler(newValue, oldValue) {
    
        console.log('obj.a changed:', newValue, oldValue);
      },
    },
  },
  methods: {
    
    handleInput(event) {
    
      this.obj[event.target.name] = event.target.value;
    },
  },
};
</script>

        

          
        
        
        

          

          AI 代码解读
        
      
      

在上述示例中，我们使用'obj.a'作为watch选项的键，这样只会监听obj对象中的a属性的变化，而不会监听其他属性的变化。当obj.a属性发生变化时，会触发handler函数，并将新的值和旧的值作为参数传递给它。