vue中watch的监听作用

vue 中对文本框的监听可以通过keyup事件绑定机制，也可以通过watch属性对文本框中的数据进行监听
keyup 监听文本框
例如：通过keyup监听文本框中数据的变化,从而触发一个相应的事件

   <input type="text" v-model="firstname" @keyup="getFullName">+
     <input type="text" v-model="lastname" @keyup="getFullName">=
     <input type="text" v-model="fullname"> 

   var vm = new Vue({
              el: '#app',
              data:{
                  firstname:'',
                  lastname: '',
                  fullname: ''
              },
              methods:{
                  getFullName(){
                      this.fullname = this.firstname + '-' + this.lastname;
                  }
              }
              }）

watch监听文本框
也可以通过使用watch属性可以监视data中指定数据的变化，然后触发watch中对应的function函数

 <input type="text" v-model="firstname">+
         <input type="text" v-model="lastname" >=
         <input type="text" v-model="fullname"> 
  
   var vm = new Vue({
              el: '#app',
              data:{
                  firstname:'',
                  lastname: '',
                  fullname: ''
              },
              methods:{
                  getFullName(){
                      this.fullname = this.firstname + '-' + this.lastname;
                  }
              }，
              watch:{
         'firstname':function(){
             this.fullname =this.firstname + '-' + this.lastname;
         },
         'lastname' :function(){
            this.fullname =this.firstname + '-' + this.lastname;
         }
          }
              }）

watch监听路由
watch除了可以监听到文本框中数据的变化，还可以监听到路由的变化
例如使用watch监听登陆和注册界面的路由变化

 watch:{
             '$route.path' :function(newVal,oldVal){
                 if(newVal =='/login'){
                     console.log('欢迎来到登陆界面！')
                     }
                 else if(newVal == '/register'){
                     console.log('欢迎来到注册界面')
                 }
             }
         }