SoFunction
Updated on 2025-04-04

Detailed explanation of the usage of vue watch immediate method

Detailed explanation of the usage of vue watch immediate method

Updated: June 14, 2023 11:08:37 Author: Pan Sidong
This article mainly introduces a detailed explanation of the usage of vue watch immediate method. This article introduces you very detailed through the example code, which has certain reference value for your study or work. Friends who need it can refer to it.
  • passimmediateOptions: We can execute callback functions when we first listen to it to perform some initialization operations.
  • Note: If we listen to something that is an object or array type data, thenimmediateOptions will only perform a callback operation once when the instance is initialized, rather than re-executing the callback function when the data inside the object or array changes.
  • If you need to execute the callback function immediately when internal data changes, you can usedeepOption to listen for data changes in depth.

watch immediate attribute usage is simple demo

<template>
  <div>
    <p>Current count: {{ count }}</p>
    <p>Count changes: {{ times }}</p>
    <button @click="increment">Increasing the count</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0,
      times: 0
    };
  },
  watch: {
    count: {    // Listen to the count property changes and execute the callback function immediately      handler(newValue, oldValue) {
        (`count Value from ${oldValue} Become ${newValue}`);
        ++;
      },
      immediate: true // Page initialization, execute the callback function immediately!!!    }
  },
  methods: {
    increment() {
      ++;
    }
  }
};
</script>

This is the end of this article about the detailed explanation of the usage of vue watch immediate method. For more related contents of vue watch immediate method, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!

  • vue
  • watch
  • immediate

Related Articles

  • Vue3's implementation of slot slot

    Slots are used a lot in real development. For example, when we use some third-party component libraries, we usually need to customize content through custom slots. This article mainly introduces the implementation of Vue3 using slot slots. Those who are interested can learn about it.
    2023-12-12

  • A brief discussion on several ways and methods of file download in vue

    This article mainly introduces several methods and methods for downloading files in vue. The article introduces the example code in detail, which has a certain reference learning value for everyone's study or work. If you need it, please learn with the editor below.
    2023-01-01

  • Example of vue+koa2 implementing session and token login status verification

    This article mainly introduces examples of vue+koa2 to realize session and token login status verification. The example code is introduced in this article in detail, which has certain reference learning value for everyone's learning or work. Friends who need it, please learn with the editor below.
    2019-08-08

  • Detailed explanation of the usage example of the el-date-picker time selector in Vue

    el-date-picker is a date picker component provided in the Element UI framework. It supports a variety of selection methods such as single date, date range, time, date time, etc. This article introduces the use of el-date-picker time picker in Vue. Interested friends, let’s take a look.
    2023-10-10

  • Detailed steps for building a vue3+ts+pinia+vant project

    Recently, the company wants to reconstruct a project. Here I will summarize it. This article mainly introduces the detailed steps of the vue3+ts+pinia+vant project construction. The article introduces it in detail through graphics and code. Friends who need it can refer to it.
    2024-09-09

  • Code for vue to implement virtual list function

    This article mainly introduces the virtual list of vue implementations. This article introduces you very detailed through the example code, which has certain reference value for your study or work. Friends who need it can refer to it.
    2020-07-07

  • el-tree uses to get the parent node data of the currently selected node

    This article mainly introduces the use of el-tree to obtain the parent node data of the currently selected node. The example code is introduced in this article in detail, which has certain reference learning value for everyone's learning or work. Friends who need it, please learn with the editor below.
    2023-10-10

  • Based on vue+echarts, the bar graph gradient effect is realized (each column has different color)

    Echarts bar chart was used in the vue project some time ago. Since the UI design draft requires the use of gradient colors and the colors of each column are different, I did some research and now I will share my implementation plan as follows
    2024-05-05

  • Vue uses computed and watch to monitor changes in multiple attributes

    This article mainly introduces you to the method of using computed and watch to monitor changes in multiple attributes in Vue. There are detailed code examples for your reference, which have certain reference value. Friends who need it can refer to it.
    2023-10-10

  • Explain three ways to solve the label style in v-html elements in vue

    This article mainly introduces three ways to solve the tag styles in the v-html element in vue. The editor thinks it is quite good. I will share it with you now and give you a reference. Let's take a look with the editor
    2018-11-11

Latest Comments