Comprehensive summary of Vue3.0's various listening methods

Listener
1.watchEffect
2.watch

1.1 The first way to listen
1.2 The second way to listen
1.3 Listening to multiple data sources

Summarize

Listener

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.

1.watchEffect

Execute immediately, no immediate

Listening, watchEffect is executed immediately, there is no immediate, no need to pass the listening content, automatically perceives code dependencies, no need to pass parameters, only need to pass a callback function, cannot get the previous value

If you need to disable the listener, you can call back this listener function

const stop = watchEffect(()=>{
        // console.log('num:',num.value);
        // console.log('num:',str.value);
      })

2.watch

It will not be executed immediately, you need to manually start the immediate

//Specify the value num to listen to
      watch(num,(val,oval)=>{
        // val: new value, oval: previous value // console.log(num.value);
        // console.log(val,oval);
      },{//The second parameter obj immediate,deep
      immediate:true//By default, it will monitor only when the data changes.
      // It will not be executed when it is created for the first time. Set it to true and it will be executed for the first time.

Listen to the data source of ref
Listening to reactive data sources

1.1 The first way to listen

//Listen to the changes of id and object data under statewatch(state,(val,oval)=>{
        // console.log('id',val.id,oval);
      },{
        immediate:true,
        deep:true//Turn on deep monitoring to detect changes in object attribute values})

1.2 The second way to listen

// Listen to state.uname
      watch(()=>state.uname,(uname,p)=>{
        // new value of uname, old value of p console.log(uname,p);
      },{
        immediate:true
      })

1.3 Listening to multiple data sources

//Listen for multiple data (id, uname)
    //()=>state.id, equivalent to //object.values(toRefs(state)) deconstructs const stop = watch([()=>state.id,()=>state.uname],([id,uname],[oid,oname])=>{
        // id new, oid old console.log('id',id,oid);
        // uname new, oname old console.log('uname',uname,oname);
      })

Summarize

This is the end of this article on various listening methods of Vue3.0. For more relevant content on Vue3.0 listening methods, 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: