(Images from the Internet, such as assault and deletion)

preface

Listeners are primarily used to listen for changes in data, usually executed when the data changes

Vue official note

Watch is an object, the key is the expression to observe, and the value is the corresponding callback function. The value can also be a method name, or an object that contains options

A simple example using Watch

<! DOCTYPE html><html>
	<head>
		<meta charset="UTF-8" />
		<title>Watch the sample</title>
		<! Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<! -- Get a container ready -->
		<div id="root">
			<h2>So {{isHappy? 'happy':'sad' }}</h2>
			<button @click="change">Switch the weather</button>
		</div>
	</body>

	<script type="text/javascript">
		const vm = new Vue({
			data: {isHappy:true,},methods: {
				change(){
					this.isHappy = !this.isHappy
				}
			},
			watch: {isHappy(newValue,oldValue){  // This is a shorthand form, which can only be used when there is only a handler
				      console.log('isHappy has changed ',newValue,oldValue)
					}
                                // Complete
                                // isHappy:{ 
                                // handler(newValue,oldValue){ 
			        // console.log('isHappy value changed ',newValue,oldValue)
				// } 
                                // }  
				}
		}).$mount('#root')
	</script>
</html>
Copy the code

This example has already instantiated the VM, and the watch property can also be called as follows (there is no need to redefine watch inside the instance at this point):

vm.$watch('isHappy', {handler(newValue,oldValue){
	console.log('isHot has been modified ',newValue,oldValue)
	}
	})
Copy the code

Immediate attribute of watch

When you use Watch to monitor data changes, the listener function is not executed when the value is first bound (when the page loads), but only when the value changes. To execute the function the first time the binding (when the page loads), you need to add the following properties

immediate: true

The deep property of Watch

By default, watch in Vue does not monitor changes in the internal value of the object, that is, only monitors the data at layer 1. To monitor data at layer 2 or higher, add the following attributes:

deep: true

Note :Vue itself can monitor the change of the internal value of the object, but the watch provided by Vue cannot by default!

Add two small rules

(1) It is better to write all functions managed by Vue as normal functions, so that this refers to the VM or component instance object.

(2) All functions not managed by Vue (e.g. timer callback, Ajax callback, Promise callback, etc.) should be written as arrow functions, so that this points to the VM or component instance object.

The last

Hope to organize the information to help you, like the words please help to like

If you have any suggestions, feel free to leave them in the comments section

Please also criticize the inadequacies, thank you!

QQ:2718613144