Vue中watch监视属性

监听属性

在Vue中可以使用watch属性来监听属性变化
语法

 watch: {
    要监视的属性(newValue, OldValue) {
      /在这里可以添加响应属性变化的逻辑
    }
  },

1. 在 Vue 组件中定义一个属性，在这个案例中我们定义了 count 属性。

 <div id="root">
        <p>Count: {{ count }}</p>
        <button @click="increment">Increment</button>
      </div>

      <script>
        new Vue({
            el:"#root",
            data(){
                return{
                    count:0
                }
            },

            methods:{
                increment() {
                    this.count++
                }

            },

            watch:{
                count(newValue,OldValue){
                    console.log(`从${OldValue}变化为${newValue}`)
                }
            }
        })
      </script>
    

在上述案例中，创建了一个简单的计数器组件。每次点击 “Increment” 按钮时，count 值都会递增。在 watch 选项中，监听 count 属性的变化，并在控制台打印出新旧值的信息。在回调函数中添加处理属性变化的逻辑。

深度监听

要在 watch 中进行深度监听，可以使用 { deep: true } 作为选项。这将使 Vue 在检测到嵌套属性、对象或数组内部值发生变化时触发回调函数。
语法

 watch: {
 要监听的对象或数组：{
    handler(newValue, OldValue) {
      /在这里可以添加响应属性变化的逻辑
      }
    }
  },

 <div id="root">
          <p>Person: {{ person.name }}</p>
          <p>Age: {{ person.age }}</p>
          <button @click="changeName">Change Name</button>
        </div>
      
      
      <script>
      new Vue({
        el:"#root",
        data() {
          return {
            person: {
              name: 'John',
              age: 30
            }
          };
        },
        watch: {
          person: {
            deep: true,
            handler(newValue, oldValue) {
              console.log('Person changed:', newValue.name);
            }
           
          }
        },
        methods: {
          changeName() {
            this.person.name = 'Jane';
          }
        }
      });
      </script>

在上述示例中，拥有一个包含 person 对象的组件，并添加了对其的深度监听。当 person 对象内部的任何属性发生变化时，Vue 将调用回调函数，并打印出新的 person 值。