vue之watch

watch：监听vue项目上数据变动；

使用方法有四种：

    基本代码如下：(监听input的变化)

<input v-model='text'>

<p>{{p_text}}</p>



data(){

    return{

        text:'first',

        p_text:''

    }

}

1.     简单模式：

 watch:{

     text(e){

        var that=this;

        that.p_text=e;

     }

}

上面代码解析：input的值绑定为text，用watch监听text的变化，如果变化了，就让p标签的值一起变化；

        2.监听并执行函数：

watch:{

    text:'city'

}

methods:{

    city(e){

        this.p_text=e;

    }

}

    3.最初绑定的时候就执行：

watch:{

    text:'city'

}

methods:{

    city(e){

        this.p_text=e;

    }

}

    上面代码多了handler和immediate，当immediata为true的时候，默认为页面初始进入的时候就执行这个函数，也就是页面初始进入的时候p_text=text;

4.deep:修改一下基础 代码

    

<input v-mode='text.name'>

<p>{{p_text.name}}</p>

data(){

    return{

        text:{ id:1, name:'a'},

        p_text:{id:1,name:'b'}

    }

}

上面代码text为一个数组，想检测他的数据变化需要深度检测deep；

watch:{

    text:{

        handler:(old,new){

            this.p_text.name=new.name;

        },

        deep:true

    }

}