Detailed explanation of watchEffect function in Vue3: In-depth use of Vue3 responsiveness

Vue3 is one of the most popular frameworks in the front-end industry. Its latest version has made some important changes in responsiveness. Among them, the watchEffect function is one of the important changes in Vue3. This article will explain the watchEffect function in detail to facilitate the in-depth use of Vue3 responsiveness.

First of all, we need to understand what responsiveness is. Generally speaking, responsiveness refers to a mechanism that automatically updates related views when data changes. Responsiveness in Vue3 is implemented through Proxy. Proxy is a new API in ES6. It can intercept object operations and verify the proxied object, thereby realizing responsive functionality.

In Vue3, the watchEffect function is one of the keys to achieving responsiveness. The watchEffect function is a simple yet powerful API for automatically running functions when dependencies change. It observes all reactive data used in the function and automatically reruns the function when this data changes.

The following is a basic example:

import {reactive, watchEffect} from 'vue'

const state = reactive({count: 0})

watchEffect(() => {
  console.log(state.count)
})

In the above example, we created a basic reactive object state and monitored changes in the count property through the watchEffect function. When the count attribute changes, the new value will be output to the console.

It should be noted that the watchEffect function can not only monitor the property changes of the object, but also monitor the changes of the array. When the elements in an array change, the watchEffect function will also automatically rerun.

The following is an example of an array:

import {reactive, watchEffect} from 'vue'

const state = reactive({list: ['a', 'b', 'c']})

watchEffect(() => {
  console.log(state.list.join(','))
})

state.list.push('d')

In the above example, we also monitored changes in the responsive object. When a new element is added to the array, the watchEffect function is re-run and the new array is printed to the console.

In addition, the watchEffect function can also receive a configuration object as its second parameter. This object can specify the characteristics of the watchEffect function, such as whether to execute the function immediately, etc. In the code example below, we create a Vue component with a timer that updates the page and updates the timer every second.

<template>
  <div> {{ time }} </div>
</template>

<script>
  import {reactive, watchEffect} from 'vue'
  
  export default {
    setup() {
      const state = reactive({time: 0})
      
      const setTime = () => {
        setTimeout(() => {
          state.time++
        }, 1000)
      }
      
      watchEffect(setTime, { flush: 'sync' })
      
      return {time: state.time}
    }
  }
</script>

In the above code, we create a timer and update its seconds into a reactive object using the watchEffect function. We also set the flush attribute of the watchEffect function to "sync" to ensure that the watcher has run before updating the component.

In short, the watchEffect function is a very important function in the Vue3 responsive system. It can automatically monitor changes in responsive data and automatically run specified functions when the data changes. When developing Vue3 applications, we should have a deep understanding of the watchEffect function in order to use Vue3 reactivity in depth.

The above is the detailed content of Detailed explanation of watchEffect function in Vue3: In-depth use of Vue3 responsiveness. For more information, please follow other related articles on the PHP Chinese website!