Vue.js之监听器和计算属性

一、监听器：watch

监听某个data数据或者监听路由地址，当data数据或者路由地址发生了变化，就会触发其中的方法执行。

1.监听data数据

<div id="app">
    <input type="text" v-model="t1">
    {
  {t2}}
</div>

new Vue({
    el:"#app",
    data:{
        t1:"",
        t2:""
    },
    watch:{
       //监听t1,如果t1发生了变化，则t2得到一个组合值
       //参数可以省略、newval、newval oldval三种形式
        t1(newval,oldval){
          this.t2=newval+"---"+oldval
        }
    }
})

2.监听路由

new Vue({
    el:"#app",
    data:{
        t1:"",
        t2:""
    },
    watch:{
       //newval,oldval指的是路由中的path值
       $route.path(newval,oldval){
          console.log(newval+"---"+oldval)
        }
    }
})

二、计算属性：computed