526互联

vue watch immediate方法用法

发布时间 2023-06-14 11:04:23作者: 盘思动
  • 通过immediate 选项,我们可以第一次监听时就执行回调函数,以便进行一些初始化操作.
  • 注意: 如果我们监听的事一个对象或数组类型数据,那么immediate 选项只会在实例初始化时执行一次回调操作，而不是在对象或数组内部数据变化时重新执行回调函数。
  • 如果需要在内部数据变化时也立即执行回调函数,可以使用deep 选项来深度监听数据变化.

watch immediate 属性用法简单demo

<template>
  <div>
    <p>当前计数: {{ count }}</p>
    <p>计数变化次数: {{ times }}</p>
    <button @click="increment">增加计数</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      times: 0
    };
  },
  watch: {
    count: {    // 监听 count 属性变化并立即执行回调函数
      handler(newValue, oldValue) {
        console.log(`count 值从 ${oldValue} 变为 ${newValue}`);
        this.times++;
      },
      immediate: true // 页面初始化,立即执行一次回调函数!!!
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>