【Vue侦听器】

watch侦听器允许开发者监视数据的变化

 <div id="app">
        <input type="text" v-model="username">
 </div> 		
	const vm=new Vue({
            el:"#app",
            data:{
                username:""
           	 },
            //所有的侦听器 都应该定义到watch节点下
            watch:{
                // 侦听器本质是一个函数，要见识哪个数据的变化，就把数据作为方法名即可
                username(newVal,oldVal){
                    console.log('监听到username的变化',newVal,oldVal);
                }
            }
        })

侦听器的格式

1.方法格式的侦听器

• 缺点1:无法在刚进入页面的时候，自动触发
• 缺点2:如果侦听器是一个对象，对象中属性发生了变化，不会触发侦听器

 <div id="app">
        <input type="text" v-model="username">
 </div> 
const vm=new Vue({
            el:"#app",
            data:{
                username:""
            },
            //所有的侦听器 都应该定义到watch节点下
            watch:{
                // 侦听器本质是一个函数，要监视哪个数据的变化，就把数据作为方法名即可
                username(newVal){
                    // console.log('监听到username的变化',newVal,oldVal);
                    $.get('请求'+newVal,function(result){
                        console.log(result);
                    })
                }
            }
        })

2.对象格式的侦听器

• 好处1：可以通过immediate选项，让侦听器自动触发
• 好处2：可以使用deep选项，让侦听器深度监听对象中每个属性的变化

  const vm=new Vue({
            el:"#app",
            data:{
                username:"admin"
            },
            //所有的侦听器 都应该定义到watch节点下
            watch:{
                username:{
                  handler(newVal,oldVal){
                    console.log(newVal,oldVal);
                  },
                //immediate  默认是false
                //immediate  让侦听器自动触发
                  immediate:true
                }
            }
        })

深度监听

   const vm = new Vue({
            el: "#app",
            data: {
                info: {
                    username: "admin"
                }
            },
            //所有的侦听器 都应该定义到watch节点下
            watch: {
                // info: {
                //     handler(newVal) {
                //         console.log(newVal);
                //     },
                //开启深度监听，只要对象中任何一个变化了，都会触发
                //     deep:true
                // }
                //如果要侦听的是对象的子属性的变化，则需要包裹一层单引号
                'info.username'(newVal){
                    console.log(newVal);
                }
            }
        })