Vue监视属性变化watch

news2024/11/16 14:45:29

在 Vue.js 中，watch 选项用于观察 Vue 实例的数据变化，并在数据变化时执行相应的回调函数。它特别适用于你需要在数据变化时执行异步或开销较大的操作的场景。watch 可以监听数据属性、计算属性的变化，也可以对深层嵌套的数据进行监听。

基本语法

watch: {
  // 监听单一数据属性
  propertyName(newValue, oldValue) {
    // 数据变化时执行的逻辑
    console.log(`属性值从 ${oldValue} 变为 ${newValue}`);
  },
  
  // 监听多个属性
  property1(newValue, oldValue) {
    // 处理 property1 变化
  },
  property2(newValue, oldValue) {
    // 处理 property2 变化
  }
}

关键点

数据响应性：watch 主要用于监听数据属性或计算属性的变化，当它们的值发生变化时，回调函数会自动执行。
回调函数参数：回调函数接受两个参数：
- newValue：新的属性值。
- oldValue：旧的属性值。

深度监听（deep）：默认情况下，watch 只会监听属性的第一层变化。如果需要监听对象或数组的深层变化，可以设置 deep: true 来实现深度监听。

watch: {
  'myObject': {
    handler(newVal, oldVal) {
      console.log('myObject 发生变化');
    },
    deep: true // 开启深度监听
  }
}

立即触发（immediate）：如果你希望在 Vue 实例创建时立即触发回调函数（而不是等到数据发生变化时），可以使用 immediate: true。

watch: {
  myProperty: {
    handler(newVal, oldVal) {
      console.log('初始化时的值:', newVal);
    },
    immediate: true // 实例化时立即执行
  }
}

示例：监听数据属性

假设我们有一个 Vue 组件，包含一个 counter 属性，点击按钮时该属性的值会增加，我们想监听这个属性的变化。

<template>
  <div>
    <p>计数器: {{ counter }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    };
  },
  watch: {
    // 监听 counter 的变化
    counter(newVal, oldVal) {
      console.log(`计数器值从 ${oldVal} 变为 ${newVal}`);
    }
  },
  methods: {
    increment() {
      this.counter++;
    }
  }
};
</script>

在这个例子中，当你点击按钮时，counter 的值会变化，而 watch 监听到 counter 的变化后会打印出旧值和新值。

示例：深度监听对象

如果我们有一个嵌套的对象，想要监听它的变化，可以使用 deep 选项。

<template>
  <div>
    <p>{{ user.name }}</p>
    <button @click="changeName">修改姓名</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: { name: 'Alice', age: 30 }
    };
  },
  watch: {
    // 深度监听 user 对象的变化
    user: {
      handler(newVal, oldVal) {
        console.log('用户信息变化:', newVal);
      },
      deep: true
    }
  },
  methods: {
    changeName() {
      this.user.name = 'Bob'; // 会触发 watch
    }
  }
};
</script>