How to use watch to listen for data changes in vue

This article mainly introduces the relevant knowledge of "how to use watch to monitor data changes in vue". The editor shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope that this article "how to use watch to monitor data changes in vue" can help you solve the problem.

1. Several methods used by watch

(1) listen for changes in data data through watch. When the data changes, the current value will be printed.

Watch: {data (val, newval) {console.log (val) console.log (newval)}}

(2) listen for changes in docData data through watch. When the data changes, this.change_number++ (use depth monitoring)

Watch: {docData: {handler (newVal) {this.change_number++}, deep: true}}

(3) listen for changes in data data through watch, and execute the changeData method when the data changes.

Watch: {data: 'changeData' / / value can be the method name of methods}, methods: {changeData (curVal,oldVal) {conosle.log (curVal,oldVal)}}

2. Detailed explanation of immediate, handler and deep attributes in watch

(1) immediate and handler

A feature of using watch in this way is that when the value is bound for the first time, the listening function is not executed, only when the value changes. If we need to execute the function as well when we initially bind the value, we need to use the immediate attribute.

Eg:

Watch: {docData: {handler (newVal) {this.change_number++}, immediate: true}}

(2) deep

When you need to listen for changes in an object, the ordinary watch method cannot listen to the changes in the internal properties of the object, so you need the deep property to listen deeply on the object.

Eg:data () {return {docData: {'doc_id': 1,' tpl_data': 'abc'}, watch: {docData: {handler (newVal) {this.change_number++}, deep: true}}

If you set deep:true, you can listen for changes in docData.doc_id. This listener will be added to all attributes of docData. When there are many attributes of the object, handler will be executed for each property value change. If you need to listen for only one property value in an object, you can do the following optimization: listen for object properties in the form of a string:

Eg:data () {return {docData: {'doc_id': 1,' tpl_data': 'abc'}, watch: {' docData.doc_id': {handler (newVal, oldVal) {. }, deep: true}} this is the end of the introduction to "how to use watch to listen for data changes in vue". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.