JIYIK CN >

In Vue, watchit is a way to perform asynchronous tasks or trigger responsive dependencies when data changes. In most cases, watch is delayed by default. This means that the watch will only be triggered when the monitored value changes, and it will usually be executed in the next event loop cycle. However, sometimes we want the watch to execute immediately without waiting for the next event loop cycle. This is the role of the immediate property.

The immediate property is an optional boolean property that specifies whether the watch should be executed immediately when initially bound. If the immediate property is set to true , the callback will be executed immediately after the initial frame rendering is completed watch. Otherwise, the watch will execute the callback after the monitored value changes.

Here is an example to illustrate the functionality of the immediate property of watch in Vue:

Let's assume that there is an array where each element is an object and each object has the following properties: name, age and gender. We want to monitor the age of all objects in the array and trigger a callback function to update the data on the page when the age changes. This is a typical Vue monitor.

<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>

In the code above, we use Vue's watch property to monitor changes in the age of all people in the array. In this case, we set the immediate property to true, which means that after the framework is initialized, the age of each element is monitored immediately and the watch callback function is executed without waiting for the next event loop cycle.

In general, Vue's immediate property provides a way to quickly execute watch callback functions without waiting for the next event loop cycle. This is very useful for situations where some operations need to be performed immediately, such as performing some asynchronous requests or calculation operations after the framework is initialized.