Understanding of the Vue.js $watch method

Bo Master recently on the vue.js of the official tutorial in self-study vue.js, Bo Master from childhood dull, in the tutorial is really a lot of points are not very understanding, the next thing to say this $watch method is one of the less understanding of the point. Let's take a look at how the $watch method is interpreted in the Vue.js API: An expression or a computed property function that observes the change of the Vue instance. The callback function gets the new and old values for the arguments. The expression accepts only the key path of the supervision. For more complex expressions, replace them with a function. Official Example:

1 //Key path2 vm. $watch (' A.B.C ', function (newval, oldval) {3 //Do something4 })5 //function6 VMs. $watch (7 function () {8 return THIS.A + this.b9   },Ten function (newval, oldval) { One //Do something A   } - ) - VM. $watch returns a cancellation observation function to stop triggering the callback: the  - var unwatch = vm. $watch (' A ', CB) - //After canceling observation -Unwatch ()

Bo Master very seriously looked, at that time was confused forced, did not read. Fortunately online big God, check the check finally understand the use of this $watch method. Plainly $watch the goods is to observe a change in the value of the observed value of a change, then execute the statement inside the function. Needless to say, we look directly at the code:

Html:

1 <DivID= "Watch">2FirstName:<inputtype= "text"name= "Li"V-model= "FirstName">3         <BR>4LastName:<inputtype= "text"name= "Fei"V-model= "LastName">5         <P>FullName: {{fullName}}</P>6</Div>

Js:

1 var vm = new Vue ({2 el: ' #watch ',3 data: {4 firstName: ' A ',5 lastName: ' Fei ',6 fullName: ' A Fei '7             },8 Watch: {9 Firstname:function (val) {Ten this.fullname = val + ' + this.lastname One                 }, A Lastname:function (val) { - this.fullname = this.firstname + "+ Val -                 } the             } -})

In the code, we use the Wach method to listen to the two variables, FirstName and LastName, we do a double binding in the input box, this way, the value we enter in the FirstName input field will change the value of the variable firstname, The same can be LastName, because the value of the change and watch the goods, so watch the function code will run, so that the FullName will change accordingly. So the use of this method of $watch will be understood in a sudden. In the above example, $watch is almost the same as the on-change inside the native JS.

The above is Bo Master of $watch method Understanding, Hope can help you understand this method, if the above what is wrong place, trouble you crossing many points, thank you.

Understanding of the Vue.js $watch method