How to use watch listeners in Vue2 and Vue3

How to use watch listeners in Vue2 and Vue3

watch : listen for data changes (change events of a certain value)

vue2.x

 data(){
     return {
         num:10
     }
 },
 watch:{
      num:{
	      /*
	       * newValue: current value * oldValue: modify the value of the last moment */
          handler(newValue,oldValue){
          	// doSomething
          },
          /*
           * deep: Boolean: Deep monitoring * true: monitor heap changes * false: only monitor stack changes (default)
           */
          deep:true/false,
          /*
           * immediate:Boolean: Whether to execute the handler function when it is first defined* true: execute the handler function when it is first defined* false: execute the handler function after modification*/          
          immediate:true/false
      }      
  }

vue3.x

Watch is used to monitor responsive data

Basic Use

const num = ref(0)
1. Import import {watch} from 'vue'
2. Use `const return value = watch(value to be monitored, (newVal,oldVal)=>{ }, {deep,immediate,flush})`
	 
	 Return value: You can turn off monitoring: return value()
	 Parameter 1: The value to be monitored Basic data types (Number, String, Boolean, null, undefined): () => Basic data type value Complex data types (Array, Object, Function): Directly write / () => Basic data type value Parameter 2: Analogy to the handler function in Vue2 Parameter 3: {} object, the object can have a configuration item: deep, immediate, flush,
	 		The meanings of deep and immediate have been described above. Here we mainly explain the values ​​of flush:
	 			 `flush:post/sync/pre
      				   pre (default value): before rendering, the value is changed and not rendered to the DOM
      				   post: After rendering, the value changes and is also rendered to the DOM
    				   sync: Render once per change, each time before rendering`
	 		

Note:
In actual development, no changes can be detected and unified use is used

watch(()=>responsive data,()=>{},{deep:true})

The above is the detailed content of how to use the watch listener in Vue2 and Vue3. For more information on the use of watch listeners, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • Detailed explanation of the watch listener example in vue3.0
  • Solve the problem of undefined when calling this in vue listener watch
  • Vue 2.0 listener watch attribute code detailed explanation
  • Advanced examples of watch usage in Vue.js
  • An article teaches you how to use Vue's watch listener

<<:  MySql index improves query speed common methods code examples

>>:  Tomcat CentOS installation process diagram

Recommend

Analysis of the Principle of MySQL Index Length Limit

This article mainly introduces the analysis of th...

Detailed discussion of the character order of mysql order by in (recommended)

//MySQL statement SELECT * FROM `MyTable` WHERE `...

How to build pptpd service in Alibaba Cloud Ubuntu 16.04

1. To build a PPTP VPN, you need to open port 172...

How to add a column to a large MySQL table

The question is referenced from: https://www.zhih...

MySQL 5.7 installation-free configuration graphic tutorial

Mysql is a popular and easy-to-use database softw...

How to publish a locally built docker image to dockerhub

Today we will introduce how to publish the local ...

Detailed explanation of meta tags and usage in html

I won’t waste any more time talking nonsense, let...

How to connect to MySQL database using Node-Red

To connect Node-red to the database (mysql), you ...

What knowledge systems do web designers need?

Product designers face complex and large manufactu...

HTML input file control limits the type of uploaded files

Add an input file HTML control to the web page: &...

How to monitor Linux server status

We deal with Linux servers every day, especially ...

MySQL 5.5.56 installation-free version configuration method

The configuration method of MySQL 5.5.56 free ins...