Usage and best practice guide for watch in Vue3

Preface🌟
1. API Introduction
2. Monitoring multiple data sources
3. Listening Array
4. Objects to be monitored
5. Conclusion

Preface🌟

This article reveals the best practices of watch in Vue3 in the form of experiments.

The main purpose of this article is to study how to get the current and previous values when watching for responsive data. By the way, I will review the usage of watch, and then introduce how to use ref and reactive to define responsive data in order to cooperate with watch to obtain current and previous values.

1. API Introduction

watch(WatcherSource, Callback, [WatchOptions])

type WatcherSource<T> = Ref<T> | (() => T)

interface WatchOptions extends WatchEffectOptions {
    deep?: boolean // default: false
  immediate?: boolean // default: false
  
}

Parameter Description:

WatcherSource: Used to specify the reactive variable to watch. WatcherSource can pass in ref responsive data, and reactive responsive objects must be written in the form of functions.

Callback: The callback function to be executed, which can receive the current value newValue and the previous value oldValue as input parameters in sequence.

WatchOptions: supports deep and immediate. When you need to deeply monitor the responsive object, set deep: true; by default, watch is lazy. When we set immediate: true, watch will execute the callback function immediately when it is initialized.

In addition, vue3's watch also supports listening to multiple responsive data, and can also manually stop watch monitoring.

2. Monitoring multiple data sources

<template>
  <div class="watch-test">
    <div>name：{{name}}</div>
    <div>age:{{age}}</div>
  </div>
  <div>
    <button @click="changeName">Change Name</button>
    <button @click="changeAge">Change age</button>
  </div>
</template>

<script>
  import {ref, watch} from 'vue'

  export default {
    name: 'Home',
    setup() {

      const name = ref('小松楠奈')
      const age = ref(25)

      const watchFunc = watch([name, age], ([name, age], [prevName, prevAge]) => {
        console.log('newName', name, 'oldName', prevName)
        console.log('newAge', age, 'oldAge', prevAge)
        if (age > 26) {
          watchFunc() // Stop monitoring}
      },{immediate:true})

      const changeName = () => {
        name.value = 'Arimura Kasumi'
      }
      const changeAge = () => {
        age.value += 2
      }
      return {
        name,
        age,
        changeName,
        changeAge
      }
    }
  }
</script>

Phenomenon: When the name and age are changed, watch monitors the data changes. When age is greater than 26, we stop monitoring. If we change the age at this time, the callback function of watch will become invalid due to the stop of watch.

Conclusion: We can use watch to monitor changes in multiple values, or we can name the watch function and then stop monitoring by executing the name() function.

3. Listening Array

<template>
  <div class="watch-test">
    <div>ref defines an array: {{arrayRef}}</div>
    <div>reactive definition array: {{arrayReactive}}</div>
  </div>
  <div>
    <button @click="changeArrayRef">Change the first item of the ref definition array</button>
    <button @click="changeArrayReactive">Change the first item of the reactive definition array</button>
  </div>
</template>

<script>
  import {ref, reactive, watch} from 'vue'

  export default {
    name: 'WatchTest',
    setup() {
      const arrayRef = ref([1, 2, 3, 4])
      const arrayReactive = reactive([1, 2, 3, 4])

      //ref not deep
      const arrayRefWatch = watch(arrayRef, (newValue, oldValue) => {
        console.log('newArrayRefWatch', newValue, 'oldArrayRefWatch', oldValue)
      })

      //ref deep
      const arrayRefDeepWatch = watch(arrayRef, (newValue, oldValue) => {
        console.log('newArrayRefDeepWatch', newValue, 'oldArrayRefDeepWatch', oldValue)
      }, {deep: true})

      //reactive, source is not a function const arrayReactiveWatch = watch(arrayReactive, (newValue, oldValue) => {
        console.log('newArrayReactiveWatch', newValue, 'oldArrayReactiveWatch', oldValue)
      })

      // Best Practices for Array Watching - reactive and source returns in a functional way, returning copied data const arrayReactiveFuncWatch = watch(() => [...arrayReactive], (newValue, oldValue) => {
        console.log('newArrayReactiveFuncWatch', newValue, 'oldArrayReactiveFuncWatch', oldValue)
      })

      const changeArrayRef = () => {
        arrayRef.value[0] = 6
      }
      const changeArrayReactive = () => {
        arrayReactive[0] = 6
      }
      return {
        arrayRef,
        arrayReactive,
        changeArrayRef,
        changeArrayReactive
      }
    }
  }
</script>

Phenomenon: When an array is defined as a responsive data ref, if deep: true is not added, watch cannot monitor value changes; if deep: true is added, watch can detect data changes, but the old value is the same as the new value, that is, the old value cannot be obtained. When the array is defined as a responsive object, no processing is done and watch can detect data changes, but the old value is the same as the new value. If the data source of watch is written as a function and an array is cloned and returned through the spread operator, both the new and old values can be obtained while monitoring.

Conclusion: When defining an array, it is best to define the data as a responsive object. In this way, when watching, you only need to write the data source in the form of a function and clone an array return through the extension operator, so that you can get the new value and the old value while watching.

4. Objects to be monitored

<template>
  <div class="watch-test">
    <div>user:{</div>
      <div>name:{{objReactive.user.name}}</div>
      <div>age:{{objReactive.user.age}}</div>
    <div>}</div>
    <div>brand:{{objReactive.brand}}</div>
    <div>
      <button @click="changeAge">Change age</button>
    </div>
  </div>
</template>

<script>
  import {ref, reactive, watch} from 'vue'
  import _ from 'lodash';

  export default {
    name: 'WatchTest',
    setup() {
      const objReactive = reactive({user: {name: '小松菜奈', age: '20'}, brand: 'Channel'})

      //reactive source is a function const objReactiveWatch = watch(() => objReactive, (newValue, oldValue) => {
        console.log('objReactiveWatch')
        console.log('new:',JSON.stringify(newValue))
        console.log('old:',JSON.stringify(oldValue))
      })

      //reactive, source is function, deep: true
      const objReactiveDeepWatch = watch(() => objReactive, (newValue, oldValue) => {
        console.log('objReactiveDeepWatch')
        console.log('new:',JSON.stringify(newValue))
        console.log('old:',JSON.stringify(oldValue))
      }, {deep: true})

      // Best Practices for Object Deep Watching - reactive and source returns in a functional way, returning deep-copied data const objReactiveCloneDeepWatch = watch(() => _.cloneDeep(objReactive), (newValue, oldValue) => {
        console.log('objReactiveCloneDeepWatch')
        console.log('new:',JSON.stringify(newValue))
        console.log('old:',JSON.stringify(oldValue))
      })

      const changeAge = () => {
        objReactive.user.age = 26
      }

      return {
        objReactive,
        changeAge
      }
    }
  }
</script>

Phenomenon: When an object is defined as a responsive object reactive and returned in the form of a function, if deep: true is not added, watch cannot monitor value changes; if deep: true is added, watch can detect data changes, but the old value is the same as the new value, that is, the old value cannot be obtained; if the data source of watch is written in the form of a function and a deep copy is cloned (the deep copy of the lodash library is used here) to return an object, the new and old values can be obtained while monitoring.

Conclusion: When defining an object, it is best to define the data as a responsive object. In this way, when watching, you only need to write the data source in the form of a function and return an object through a deep copy. You can get the new value and the old value while listening.

5. Conclusion

1. Usually we define primitive data (number, string, etc.) as ref response data, and reference data (array, object) as reactive response data;

2. When we use watch to monitor data changes and need to obtain both new and old values, we need to define the data source as a function and return a deep copy of the data source. When we only need the new value, we can add the deep:true option.
In fact, it doesn't matter if the reference type data is defined as ref form. You only need to define the data source as a function and return a deep copy of the data source to get the old and new values ~ hahahahahahahahahahahahahahaha, but I think the best practice is to define the reference type as reactive data.

This concludes this article on the usage and best practice guide of watch in Vue3. For more relevant content on the usage of watch in Vue3, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

A brief analysis of the use of watchEffect in Vue3
Summary of the use of vue Watch and Computed
How to understand the difference between computed and watch in Vue
Solution to the problem of repeated triggering of functions in Vue project watch
Reasons and solutions for multiple executions of the watch method when Vue monitors route changes
The use and difference between vue3 watch and watchEffect
Simple method example of vue watch monitoring object
Detailed explanation of Vue's monitoring method case

<<: Installation and verification of pytorch in linux or windows environment (solving runtimeerror problem)

>>: Mysql slow query optimization method and optimization principle