在 Vue 中 watch 的 immediate 属性有什么用？

Vue 6月前 420

在Vue中，watch是一种数据变化时执行异步任务或触发响应式依赖的方式。在大多数情况下，watch都会被默认延迟执行。这意味着，只有当所监视的值发生变化后，watch才会被触发，并且通常会在下一轮事件循环周期中执行。然而，有时候我们希望watch能够立即执行，而不需要等待下一轮事件循环的周期。这就是immediate属性的作用。

immediate属性是一个可选的布尔类型属性，它用于指定watch在初始绑定时是否应该立即执行。如果将immediate属性设置为true，则将会在初始框架渲染完成后立即执行watch回调。否则，watch将会在所监听的值变化后才会执行回调。

下面是一个用于说明Vue中watch的immediate属性功能的示例：

我们假设有一个数组，其中每个元素都是一个对象，每个对象具有以下属性：name, age和gender。我们要对数组中所有对象的年龄进行监视，并在年龄发生变化时触发一个回调函数来更新页面上的数据。这是一个典型的Vue监视器。

<template>
  <div>
    <table>
      <tr v-for="(person, index) in people" :key="index">
        <td>{{ person.name }}</td>
        <td>{{ person.age }}</td>
        <td>{{ person.gender }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      people: [
        { name: "Alice", age: 21, gender: "Female" },
        { name: "Bob", age: 32, gender: "Male" }
      ]
    };
  },
  watch: {
    "people.*.age": {
      handler(newValue, oldValue) {
        console.log(`Age changed from ${oldValue} to ${newValue}`);
      },
      immediate: true // 在初始化时执行回调
    }
  }
};
</script>