watch function in Vue3: monitor data changes

Vue3 is currently a popular JavaScript framework, which simplifies the development process and improves development efficiency and code quality. In Vue3, the watch function can easily monitor data changes and perform corresponding operations. This article will introduce the basic usage and precautions of the watch function in Vue3.

1. Basic usage of watch function

The usage of watch function in Vue3 is different from that in Vue2. The watch function in Vue3 is implemented based on ES6's Proxy, which provides more flexibility. data monitoring methods. In Vue3, we can use the watch function to monitor changes in a single data, or we can use the watch function to monitor changes in multiple data at the same time.

1. Monitoring changes in a single data

Monitoring changes in a single data is very simple, just use the watch function in the setup function. For example:

import { watch, ref } from 'vue'

export default {
  setup() {
    const name = ref('John')
    watch(name, (newValue, oldValue) => {
      console.log(`Name changed from ${oldValue} to ${newValue}`)
    })
    return {
      name
    }
  }
}

In the above code, we define a variable name of ref type and use the watch function to monitor its changes. When the value of name changes, the watch function will notify us and print out the relevant information.

2. Monitoring changes in multiple data

Similar to monitoring changes in a single data, monitoring changes in multiple data is also very easy. Just use the watch function in the setup function and pass multiple variables as the key names of its first parameter. For example:

import { watch, ref } from 'vue'

export default {
  setup() {
    const name = ref('John')
    const age = ref(18)
    const height = ref(180)

    watch({ name, age, height }, (newValues, oldValues) => {
      console.log('Data changed', newValues, oldValues)
    })

    return {
      name,
      age,
      height
    }
  }
}

In the above code, we define three ref type variables name, age and height, and use the watch function and pass them in as an object to monitor their changes. When the value of any of these three variables changes, the watch function will notify us and pass the new value and the old value as parameters of its callback function.

2. Notes on the watch function

Although the watch function is very convenient, we also need to pay attention to some details when using it.

1. Avoid triggering too frequently

Since the watch function is implemented based on Proxy, the callback function will be triggered every time the data changes. If data changes occur frequently, watch The function's callback function will also be continuously triggered, thus affecting the code performance. Therefore, when we use the watch function, we should try to avoid too frequent data changes, or add some delay processing and other operations in the callback function.

2. Listening to changes in arrays and objects

When we need to monitor changes in arrays and objects, because their underlying implementation is different from ordinary variables, we need to use Vue provides special methods for monitoring, such as deep, immediate, etc. In this way, we can correctly obtain changes in arrays and objects.

3. Use the watchEffect function to replace the watch function

In addition to the watch function, Vue3 also provides a new function watchEffect, which can more conveniently monitor responsive data changes and automatically perform corresponding operations. If we just want to simply monitor changes in responsive data, it is recommended to use the watchEffect function.

This article mainly introduces the basic usage and precautions of the watch function in Vue3. I hope it will be helpful to everyone. When using watch functions, we should follow good coding practices and try to avoid excessive use of watch functions and frequent triggering of callback functions. If you need to monitor changes in arrays and objects, you should use the special methods provided by Vue. At the same time, we can also use the watchEffect function to more conveniently monitor changes in responsive data.

The above is the detailed content of watch function in Vue3: monitor data changes. For more information, please follow other related articles on the PHP Chinese website!