The use and difference between vue3 watch and watchEffect

1.watch listener

Introducing watch

import { ref, reactive, watch, toRefs } from 'vue'

Monitor basic data types-----watch features:

1. It has a certain degree of laziness. It will not be executed when the page is displayed for the first time, but will be executed only when the data changes.

2. Parameters can get current values ​​and original values

3. You can listen to changes in multiple data and use one listener to carry them.

setup() {
	const name = ref('leilei')
	watch(name, (curVal, prevVal) => {
 	console.log(curVal, prevVal)
 })
}
template: `Name: <input v-model="name" />`

Listening to reference types-----

setup() {
	const nameObj = reactive({name: 'leilei', englishName: 'bob'})
 Listen to a data watch(() => nameObj.name, (curVal, prevVal) => {
 	console.log(curVal, prevVal)
 })
 Monitor multiple data watch([() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => {
 	console.log(curName, curEng, '----', prevName, curEng)
  setTimeout(() => {
   stop1()
  }, 5000)
 })
 const { name, englishName } = toRefs(nameObj)
}
template: `Name: <input v-model="name" /> englishName: <input v-model="englishName" />`

2.watchEffect

No excessive parameters, only one callback function

1. Execute immediately, without laziness, and it will be executed when the page is first loaded.

2. Automatically detect internal code and execute it if there is a dependency in the code

3. No need to pass the content to be listened to. It will automatically sense the code dependency. No need to pass many parameters. Just pass a callback function

4. You cannot get the value of the previous data, you can only get the current value

5. Some = asynchronous operations would be more appropriate here

watchEffect(() => {
	console.log(nameObj.name) 
})

The usage of canceling a listener is the same as that of canceling a watch listener.

const stop = watchEffect(() => {
	console.log(nameObj.name) 
 setTimeout(() => {
 	stop()
 }, 5000)
})

const stop1 = watch([() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => {
 	console.log(curName, curEng, '----', prevName, curEng)
  setTimeout(() => {
   stop1()
  }, 5000)
 })

Watch can also be changed to non-lazy immediate execution by adding a third parameter immediate: true

 watch([() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => {
 	console.log(curName, curEng, '----', prevName, curEng)
  setTimeout(() => {
   stop1()
  }, 5000)
 }, {
 	immediate: true
 })

The above is the detailed content about the usage of vue3 watch and watchEffect and their differences. For more information about vue3 watch and watchEffect, please pay attention to other related articles on 123WORDPRESS.COM!