Usage and specific functions of watch in vue3

3 is a popular JavaScript framework that provideswatch()Method to listen for changes in component data. In this article, we will introduce in detail the usage and specific functions of watch() in 3.

1. Usage of watch() in Vue3

In 3, the watch() method can be used to listen to single data, multiple data, and to obtain new and old values. The following is the basic usage of watch():

import { watch, ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    watch(count, (newVal, oldVal) => {
      (`New: ${newVal}, Old: ${oldVal}`)
    })

    return {
      count
    }
  }
}

In the above code, we define a variable of type refcountand usewatch()Method monitoringcountChanges in variables. whencountWhen the value of the variable changes,watch()The callback function will be executed and the new and old values ​​are passed as parameters to the function.

In addition to listening for a single variable,watch()You can also listen for changes in multiple variables and get old/new values.

Listening for multiple variables:

watch(
  [count1, count2],
  ([newCount1, newCount2], [oldCount1, oldCount2]) => {
    (
      `New count1: ${newCount1}, Old count1: ${oldCount1},
      New count2: ${newCount2}, Old count2: ${oldCount2}`
    )
  }
)

Get old and new values:

watch(
  [count1, count2],
  ([newCount1, newCount2], [oldCount1, oldCount2]) => {
    (`New count1: ${newCount1}, Old count1: ${oldCount1}`)
    (`New count2: ${newCount2}, Old count2: ${oldCount2}`)
  },
  { deep: true }
)

In this example, we pass an option object to enable deep listening. This method can make the variable cases listened to by watch() more huge and complex.

2. The role of watch() in Vue3

watch()Methods play a very important role in 3. They can help us listen to changes in data and perform some tasks on demand.

For example, in front-end development, we often encounter situations where the user input box is monitored. When the user input content changes, we need to update and display the relevant content in real time. For example, when the content of the input box is empty, a component is hidden, and when the content of the input box is not empty, a component is displayed.

import { watch, ref } from 'vue'

export default {
  setup() {
    const userInput = ref('')
    const showComponent = ref(false)

    watch(userInput, (newVal) => {
      if (newVal === '') {
         = false
      } else {
         = true
      }
    })

    return {
      userInput,
      showComponent
    }
  }
}

In the above code, we listen to changes in the user input box and display/hide components according to the value of the user input box.

watch()The method can also implement more complex functions, such as getting data asynchronously and re-rendering the page when the data is updated.

3. The newly introduced monitoring method watchEffect in Vue3

In 3,watchEffect()Methods are introduced.watchEffect()Methods andwatch()The method behaves similarly, but does not provide access to both the old and the new values. It can automatically execute callback functions when data changes.

import { watchEffect, ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    watchEffect(() => {
      (`Count is: ${}`)
    })

    return {
      count
    }
  }
}

In the above code, we define acountvariables and usewatchEffect() method monitors the changes in this variable. whenevercountWhen the value of the variable changes,watchEffect()The callback function will be executed.

4. Summary

In this article, we have detailed the 3watch()The usage and function of the method.watch()The method is a very important part of the Vue3 framework, which can help us listen to changes in component data and perform some tasks on demand. By using reasonably and proficientlywatch()Methods, developers can complete front-end development work more efficiently.

This is the article about the usage and specific function of watch() in vue3. For more related watch() methods in vue3, please search for my previous articles or continue browsing the related articles below. I hope you will support me in the future!