How to use $watchEffect in Vue to automatically collect dependencies

In Vue, $watchEffect is an API for monitoring responsive data changes, and can automatically collect dependencies without manually specifying the data to be monitored. In Vue 3, $watchEffect replaces the $watch method in Vue 2 and becomes a more convenient and efficient responsive data monitoring method. The following will introduce how to use $watchEffect in Vue to automatically collect dependencies.

1. Create a Vue instance

First, we need to create a Vue instance. It can be created through the Vue.createApp() method. This method returns an application instance app.

const app = Vue.createApp({
  data() {
    return {
      count: 0
    }
  }
})

2. Use $watchEffect to monitor data changes

Next, we use $watchEffect to monitor changes in data count. When the value of count changes, $watchEffect will automatically run the relevant side effect functions and collect dependencies.

app.mount('#app')

app.config.globalProperties.$watchEffect(() => {
  console.log('count is', app._data.count)
})

Here, we use the side effect function to simply print out the value of the current count. In actual project applications, side effect functions can perform more complex operations, such as updating DOM nodes and so on. $watchEffect will automatically collect any reactive properties in the Vue instance (including calculated properties, methods, etc.), and automatically run side effect functions when these property data change. This way, we don't need to manually specify the data to listen for, nor do we need to manually manage dependency collection.

3. Modify responsive data

Finally, we can try to modify the value of count to see if $watchEffect can work properly.

setTimeout(() => {
  app._data.count += 1
}, 1000)

The setTimeout function is used to delay for a period of time to simulate the effect of data changes. When the value of count changes, $watchEffect will automatically run the side effect function and print out the new count value.

Through this simple example, we can see that $watchEffect can help us automatically collect dependencies and run related side effect functions when the data changes, avoiding the trouble of manual dependency management. In actual projects, $watchEffect is a very practical responsive data monitoring API, which can greatly improve development efficiency and reduce the probability of errors.

The above is the detailed content of How to use $watchEffect in Vue to automatically collect dependencies. For more information, please follow other related articles on the PHP Chinese website!