Shulou(Shulou.com)06/02 Report--

This article mainly introduces how to watch snooping properties in Vue, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to understand it.

First of all, make sure that watch is an object and should be used as an object.

Key: that's the guy you're listening to.

Value: it can be a function that needs to be executed when the guy you monitor changes. This function has two formal parameters.

The first is the current value (the new value) and the second is the value before the update (the old value)

The value can also be a function name: however, this function name is enclosed in single quotation marks.

Values are objects that include options: there are three options.

1. The first handler: its value is a callback function. That is, the function that should be executed when a change is heard.

two。 The second is deep: its value is true or false; to confirm whether to listen in depth. (in general, you cannot listen for changes in the value of object attributes, and you can hear changes in the values of the array.)

3. The third is immediate: its value is a function that true or false; confirms whether to execute handler at the current initial value.

I. watch listens for changes in general data (numeric, string, Boolean)

Examples are as follows:

1. Numerical value

In num in the data data center, when we change it through a click event, we listen for its changes through the watch listening property.

{{num}}

Click to add one let vm = new Vue ({el:'#app', data: {num:0}, watch: {/ / current value (changed value) newval old value oldval num:function (newval,oldval) {console.log ("new value is:" + newval) Console.log ("Old value is:" + oldval);})

When we click the button, look at the console:

Note: there are two other methods in watch

Watch: {/ / current value (changed value) newval Old value oldval / / num (newval,oldval) {/ / console.log ("New value is:" + newval); / / console.log ("Old value is:" + oldval) / /} num: {handler (newval,oldval) {console.log ("New value is:" + newval); console.log ("Old value is:" + oldval);}

The output is consistent, and the following example unifies the third method, that is, the method with handler.

two。 String

The input is: {{mes}}

Let vm = new Vue ({el:'#app', data: {mes:''}, watch: {mes: {handler (newval,oldval) {console.log ("New content:" + newval) Console.log ("Old content:" + oldval);})

When we enter something in the text box:

View the output:

3. Boolean value

Show and hide by modifying Boolean values

Click to change the Boolean value let vm = new Vue ({el:'#app', data: {isShow:true}, watch: {isShow: {handler (newval,oldval) {console.log ("New value:" + newval) Console.log ("Old value:" + oldval);})

When you click the button to switch, view the console:

II. Watch listens for changes in complex type data

Deep attribute: listen for changes in an object in depth (indicates whether or not to listen in depth). 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 attribute to listen deeply on the object.

1. Object

The input is: {{mes.name}}

Let vm = new Vue ({el:'#app', data: {mes: {name:''}}) Watch: {mes: {/ / watch listens on the same handler (newval) {console.log ("new value is:" + this.mes.name) when listening on the old and new values of the object }, deep:true})

After entering in the text box, view the console:

You can also add num to the object, use the slider to control the value of num, and listen:

Data: {mes: {name:'',num:''}}, watch: {mes: {/ / watch listens for the same handler (newval) {console.log ("num new value:" + this.mes.num) when listening for the old and new values of an object. }, deep:true}}

View the output as you slide:

two。 Array

{{item}} Click to add let vm = new Vue ({el:'#app', data: {arr: [1meme 2meme 3meme 4meme 5]} Methods: {add () {/ / get the maximum value of the current array let cont = this.arr [this.arr.length-1] / / add cont++; / / add the element this.arr.push (cont) to the last bit of the array }, watch: {arr: {/ / No deep snooping or deep handler (newval) {console.log ("new array is:" + newval) is required when listening to the array })

After clicking add element, view the output result:

3. Object array

{{item.id}}-- {{item.name}} add let vm = new Vue ({el:'#app', data: {list: [{id:1,name: "wow"}, {id:2) Name: "Wa"}, {id:3,name: "Wa"}], id: ", name:''} Methods: {/ / add the received input to the array add () {this.list.push ({id:this.id,name:this.name}) / / clear the contents of the text box this.id=this.name=''}}, watch: {/ / Note: the listening data in the watch object must be the data already existing in the data center data / / watch listening array object is new, and the old value is equal. But when listening to an array, there is no need for deep monitoring! List: {handler (newval) {newval.forEach ((item) = > {console.log (item.name);})})

View the output after adding a new element:

4. Properties of an array of objects

{{x.id}}-- {{x.name}}   modifies let vm = new Vue ({el:'#app', data: {list: [{id:1,name:'ww'}, {id:2) Name:'ee'}, {id:3,name:'qq'}],}, methods: {mod (id,name) {this.list.forEach ((item) = > {/ / make judgments during traversal If the id you clicked is the data you are currently editing, if (item.id = = id) {item.name = "old buddy" console.log (item) }})}}, watch: {list: {handler (xonomy) {x.forEach ((element) = > {console.log (element.name)) })}, deep:true})

When you click modify, view the output:

Thank you for reading this article carefully. I hope the article "how to watch snooping Properties in Vue" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.