Detailed explanation of the watch listener example in vue3.0

Preface

The difference between listeners and computed properties

How to use watch in vue3?

Basic Use
Listening to multiple responsive data

Listen for responsive data defined by reactive

Listen to a property of responsive data defined by reactive
Configuration Option Usage

Summarize

Preface

While computed properties are more appropriate in most cases, there are times when a custom listener is necessary. That’s why Vue provides a more general way to respond to changes in data through the watch option. This approach is most useful when you need to perform asynchronous or expensive operations when data changes.

The difference between listeners and computed properties

Computed properties cannot perform asynchronous operations, but listeners can perform asynchronous operations, which is equivalent to an upgraded version of calculated properties.

How to use watch in vue3?

Basic Use

<template>
  <h1>watch listener page</h1>
  <p>Normal listening data: {{ num }}</p>
  <button @click="butFn">Click</button>
</template>

script

import { ref, watch } from 'vue'
// Remember to import whatever new features of Vue3 you need, and call setup() as needed {
 
    const num = ref(0)
    // watch (data to be listened, callback function)
    watch(num, (v1, v2) => {
      // v1 is the new value after the change // v2 is the value before the change console.log(v1, v2)
      // Key points: Listening to ordinary functions can obtain the values before and after modification, and the data being listened to must be responsive})
    
    // Single machine event const butFn = () => {
      num.value++
    }
    
     return { butFn, num }
}

Listening to multiple responsive data

    const num = ref(0)
    const num2 = ref(20)
    
    watch([num, num2], (v1, v2) => {
      // The result stored is an array, and the result returned is also an array formatted result // v1 is the array of the latest results // v2 is the array of old data console.log('v1', v1, 'v2', v2)
    // Summary: You can get the values before and after the update, and the listening result is also consistent with the order of array data})

Listen for responsive data defined by reactive

	const obj = reactive({
      msg: 'Strange and cute'
    })
    
   watch(obj, () => {
      // Only the latest value can be obtained console.log(obj.msg)
    })

Summary: If you listen to an object, the two parameters of the listener's callback function are the same result, indicating the latest object data. At this time, you can also directly read the listened object, and the value obtained is also the latest.

Listen to a property of responsive data defined by reactive

	const obj = reactive({
      msg: 'Strange and cute'
    })
    
	watch(() => obj.msg,(v1, v2) => {
        // v1 is the latest value of the monitored data // v2 is the original value of the monitored data console.log(v1, v2)
        // Summary: If you listen to a property in an object, you need to use the arrow function // Listening to less data is beneficial to improve performance}
    )

Configuration Option Usage

   const obj = reactive({
      msg: {
        info: 'ooo'
      }
    })
   watch(() => obj.msg,(v1, v2) => {
        console.log(v1, v2)
      },
      {
        // The first rendering of the component triggers immediate: true,
        // Turn on deep monitoring, if the data in the object changes, it will also be monitored // If the monitored data is a relatively long expression, you need to use a function // But after writing it in function form, the inner data cannot change, so you need to add the deep option deep: true
      }
    )

Summarize

This is the end of this article about the detailed explanation of the watch listener example in vue3.0. For more relevant vue3.0 watch listener content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: