How to use watch() in vue3

Vue.js 3 is a popular JavaScript framework that provides the watch() method to monitor changes in component data.

1. Usage of watch() in Vue3

In Vue.js 3, the watch() method can be used to monitor single data, multiple data, and 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) => {
      console.log(`New: ${newVal}, Old: ${oldVal}`)
    })

    return {
      count
    }
  }
}

In the above code, we define a ref type variable count and use watch() The method monitors changes in the count variable. When the value of the count variable changes, the watch() callback function will be executed, passing the new value and the old value as parameters to the function.

In addition to monitoring a single variable, watch() can also monitor changes in multiple variables and obtain old/new values.

Monitoring of multiple variables:

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

Get the old and new values:

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

In this example, we pass an option object to enable deep monitoring. This approach can make the variable cases monitored by watch() larger and more complex.

2. The role of watch() in Vue3

The watch() method plays a very important role in Vue.js 3. It can help us monitor data. changes and perform some tasks as needed.

For example, in front-end development, we often encounter the situation of monitoring user input boxes. When the user input content changes, we need to update and display 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 === '') {
        showComponent.value = false
      } else {
        showComponent.value = true
      }
    })

    return {
      userInput,
      showComponent
    }
  }
}

In the above code, we monitor the changes of the user input box and display/hide the component according to the value of the user input box.

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

3. The newly introduced monitoring method watchEffect in Vue3

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

import { watchEffect, ref } from 'vue'

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

    watchEffect(() => {
      console.log(`Count is: ${count.value}`)
    })

    return {
      count
    }
  }
}

In the above code, we define a count variable and use the watchEffect() method to monitor changes in the variable. Whenever the value of the count variable changes, the watchEffect() callback function will be executed.

The above is the detailed content of How to use watch() in vue3. For more information, please follow other related articles on the PHP Chinese website!