watchEffect in Vue3

Hits: 0

I shared with you about watch in CompositionAPI yesterday, and today I will continue to discuss watchEffect similar to watch. The following is the sample code

const app = Vue.createApp({setup() { const { reactive, watch, toRefs,watchEffect } = Vue const nameObj = reactive({ name:  'lilei' , englishname:  'hanmeimei'  }) watch([() => nameObj.name, () => nameObj.englishname], ([curName, curNameEng], [preName, preNameEng]) => {         console .log(curName, preName)         console .log(curNameEng, preNameEng) })
     //  immediately Executed, no lazy watchEffect( ()  =>  {          console .log( 'abc' )  //  no other data dependencies })
    const { name, englishname } = toRefs(nameObj)    return { name, englishname }},template: {{EJS0}},
})const vm = app.mount("#root")

Open the console, we found that the abc is printed directly on the console, and when we modify the data, the logic in watchEffect is no longer executed. According to the official explanation, it is because the data (abc) in the logic has no other data dependencies. When we change the callback function to the following, when we modify the value of the name attribute, the callback function inside will be executed.

const app = Vue.createApp({setup() { const { reactive, watch, toRefs,watchEffect } = Vue const nameObj = reactive({ name: 'lilei' , englishname: 'hanmeimei' }) watch([() => nameObj.name, () => nameObj.englishname], ([curName, curNameEng], [preName, preNameEng]) => {         console .log(curName, preName)         console .log(curNameEng, preNameEng) })
     // immediately Executed, no lazy watchEffect( () => {          console .log(nameObj.name) // depending on the corresponding data nameObj.name })
    const { name, englishname } = toRefs(nameObj)    return { name, englishname }},template: {{EJS1}},
})const vm = app.mount("#root")

If we also want the callback function in the watch to execute, we only need to add a parameter to the watch, the parameter is an object, like this

const app = View . createApp ( { setup () { const { reactive , watch , toRefs } = View const nameObj = reactive({ name : 'lilei ' , englishname : ' light ' }) watch ([() => nameObj . name, () => nameObj. englishname], ([curName, curNameWhat], [preName, preNameWhat]) => {         console.log(curName, preName)         console.log ( curNameWhat, preNameWhat) },{ immediate: true  / / Updates,Installing })
    const { name, englishname } = toRefs(nameObj)    return { name, englishname }},template: {{EJS2}},
})const vm = app.mount("#root")

Sometimes, we also want to stop monitoring, this is the same for watch and watchEffect, I take watchEffect as an example

const app = Vue.createApp({setup() {    const { reactive, toRefs,watchEffect } = Vue    const nameObj = reactive({ name: 'lilei', englishname: 'hanmeimei' })
    const stop = watchEffect( ()  =>  {          console .log(nameObj.name) // depending on the corresponding data nameObj.name setTimeout( () => { stop() }, 5000 ) //  end watchEffect after 5 s })
    const { name, englishname } = toRefs(nameObj)    return { name, englishname }},template: {{EJS3}},
})const vm = app.mount("#root")

The following editor summarizes the difference between watch and watchEffect

  1. watch is lazy by default, watchEffect executes immediately by default

  2. watch can get the current value and previous value, watchEffect can only get the current value

  3. watch can pass multiple functions as parameters, watchEffect only needs to pass a callback function

In fact, the features of watch and watchEffect are far more than these. The more detailed content will be shared with you in the actual combat in the future.

You can also scan the QR code, follow my WeChat public account, snail full stack

Leave a Reply

Your email address will not be published.