侦听器的使用方法

watch侦听器允许开发者监视数据变化，从而针对数据的变化做特定的操作

侦听器格式:

1.方法格式的侦听器

缺点1:无法在刚进入页面的时候，自动触发

缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器。

2.对象格式的侦听器

优点1：可以通过immediate选项，让侦听器自动触发

优点2：可以通过deep选项，让侦听器深度监听对象中每个属性的变化

1.初识watch侦听器

<script src="./vue.js"></script>
    <!-- 导入jquery -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <div id="name">
<input type="text" v-model="username">
    </div>
    <script>
         const vv=new Vue({
            el:"#name",
            data:{
                username:"watch侦听器"
            },
            // 所有的侦听，都应该被定义到watch节点下
            watch:{
                // 侦听器本质是函数，要监视那个数据的变化，就把那个数据名作为方法名
                // 新值在前 旧值在后 newVal是变化后的新值,oldVal是变化之前的值
                username(newVal,oldVal){
                    // console.log("值有变化了",newVal,oldVal);
                    
                    // 判断值为空时返回，此时控制台不在报错
                    if(newVal==="") return
                    // 调用jquery ajax发送请求，判断newVal是否被占用
                    $.get("https://www.escook.cn/api/finduser/"+newVal,function(value){
                        console.log(value);
                        // input输入admin显示被占用，存在的会提示
                        // 当input被清空时，会出现报错
                    })
                }
            }

    })
    </script>
   

2.immediate自动触发的使用

<script src="./vue.js"></script>
    <div id="name">
    <input type="text" v-model="username">
    </div>
    <script>
         const vv=new Vue({
            el:"#name",
            data:{
                username:"watch侦听器"
            },
          
            watch:{
                // 定义对象格式的侦听器
               username:{
                handler(newVal,oldVal){    
                console.log(newVal,oldVal);
                // watch侦听器 undefined
                },
                // immediate控制侦听器是否自动触发一次，值是布尔值，默认false不显示
                immediate:true
               }
             
            }

    })
    </script>

3.deep深度监听的使用

<script src="./vue.js"></script>
    <div id="name">
        <input type="text" v-model="info.username">
    </div>
    <script>
        const vv = new Vue({
            el: "#name",
            data: {
                info: {
                    username: "watch侦听器"
                }
            },

            watch: {
                //   info:{
                //     handler(newVal){
                //         console.log(newVal);
                //     },
                //     // deep默认false不开启，开启深度监听，只要对象中的属性发生了变化，都会触发对象的侦听器
                //     deep:true
                //   }

                // 以上方法每修改一次打印一次对象，要点开查看，可以用以下方法监听具体属性值的变化
                // 如果侦听对象的子属性，必须包裹引号
                "info.username"(newVal) {
                    console.log(newVal);
                }
            }
        })
    </script>

4.利用computed属性解决watch侦听对象或数组新旧值一样的问题

 <script src="./vue.js"></script>
    <div id="root">
        <button @click="adda">点击a加一</button>
        <h1>a的值是{{num.a}}</h1>
        <button @click="addb">点击b加一</button>
        <h1>b的值是{{num.b}}</h1>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {

                num: {
                    a: 1,
                    b: 2
                }
            },

            methods: {

                adda() {
                    this.num.a++

                },
                addb() {
                    this.num.b++
                }

            }, computed: {
                numNew() {
                    // 使用computed拷贝num对象
                    return JSON.parse(JSON.stringify(this.num));
                }
            },
            watch: { 
                numNew: {
                    handler(newValue, oldValue) {  
                        // 直接打印原值和旧值一样，没有变化，这是因为指向同一个对象或数组，地址一样
                        // 所以新旧值也一样
                        // 想要监听整个num对象内所有属性的变化，要加一个computed，此时watch监听了computed的数据
                        console.log("num对象里面的a被修改了", newValue, oldValue);
                    },
                    deep: true
                }
            }
        })
    </script>