一、监听器：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
计算属性其中可以定义一些属性，其本质上是一个方法，只是我们使用的时候可以当成data那样直接使用其名称。
计算属性的值会被缓存起来，如果方法内部的数据没有发生变化，它是不会重新计算，而是直接使用这个缓存值，如果内部的数据发生了变化，就会重新计算机并重新缓存起来。
计算属性相当于另一种形式的data，因此其是不能在data中声明。
计算属性有get和set方法，默认使用的是其get方法。
当data数据发生变化时，触发get方法；当计算属性自身变化时，触发set方法
<div id="app"><input type="text" v-model="firstname"><input type="text" v-model="lastname"><input type="text" v-model="fullname">
</div>new Vue({el:"#app",data:{firstname:"",lastname:""},computed:{ //计算属性是一个方法，但是可以使用的时候直接使用其名称//和data数据一样的使用方法 //默认get()方法 fullname(){return this.firstname+"--"+this.lastname}}
})//计算属性有get\set方法，默认的是其get方法，如果要使用set方法则分写全
computed:{ //当data中数据变化时触发get方法//当计算属性自身改变时触发set方法fullname:{get(){return this.firstname+"--"+this.lastname},set(newval){var names = newval.splist("--")this.firstname = names[0]this.lastname = names[1]}}
}
三、监听器、计算属性、方法的区别
methods:主要是写逻辑，其中的方法在每次使用时都会调用运行；
computed:计算属性，当成一个普通的属性直接使用其名称（同时不能出现在data中），默认get方法，而且必须带有get方法，则会返回一个计算的值，这个值同时会被缓存，当计算所依赖的数据没有发生变化时，下次使用计算属性则会直接使用缓存值，否则会重新触发get方法，而set方法指的是计算属性本身发生变化时触发的一系列逻辑操作。
watch:监听一个data属性或者路由path，如果发生变化则会触发其方法。