vm.$watch

观察一个Vue实例的变化,当这个实例发生变化的时候就执行function里面的语句

HTML代码:
<div id="watch">
         firstName:<input type="text" name="li"  v-model="firstName">
         <br>
         lastName:<input type="text" name="fei"  v-model="lastName">
         <p>fullName: {{fullName}}</p>
</div>

JS代码:
      var vm = new Vue({
              el: '#watch',
              data: {
                  firstName: 'a',
                  lastName: 'fei',
                  fullName: 'a fei'
              },
              watch: {
                  firstName: function (val) {
                     this.fullName = val + ' ' + this.lastName
                 },
                 lastName: function (val) {
                     this.fullName = this.firstName + ' ' + val
                 }
             }
 })

在这个代码中,用watch方法监听了 firstName和lastName这两个变量,在input输入框做了双向绑定,当firstName的值发生改变的时候,firstName变量也同样会改变;lastName同理.因为watch观察到数据的改变,watch里的方法就会运行,fullName的值也会发生相应的改变