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

计算属性其中可以定义一些属性，其本质上是一个方法，只是我们使用的时候可以当成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，如果发生变化则会触发其方法。