vue侦听器

什么是侦听器？

Vue侦听器是提供给开发者可以用来监测某些数据的变化，一旦有变化就调用函数。

语法

new Vue({
            el:'',
            data:{},
            methods:{},
            //侦听器
            //参数一：改变后的值
            //参数二：改变前的值
            watch:{
                要侦听的数据(newValue,oldValue){
                }
            }
        })

基本使用

 <div id="app">
        <button @click="msg ='word'"> 修改</button>
        <p>{{ msg }}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'hello'
            },
            methods:{},
            watch:{
                //侦听的数据变化
                //基本数据类型，
                msg(newValue,oldValue){
                    //侦听到数据变化之后，需要完成的行为
                    console.log('数据改变',newValue,oldValue);
                }
            }
        })
    </script>

点击修改按钮后：hello变为word

数组的使用

【对数组进行侦听】
数组是应用类型,存在比较复杂的侦听规则。
从理论上说，修改一个数组的内容，比如修改数组中某个元素的值，或者给数组添加新的元素，都不会修改数组本身的地址。为此，Vue.js对数组做了特殊处理,使得使用标准的数组操作方法对数组所做的修改,都可以被侦听到。
1.Vue不能检测以下数组的变动:
a.当你利用索引值直接设置一个数组时,例如:vm.items[index0fItem] = newValue
b.当你修改数组的长度时，例如:vm.items.length = newLength
2.使用标准方法修改数组可以被侦听到
push() 尾部添加
pop()尾部删除
unshift()头部添加
shift()头部删除
splice()删除、添加、替换
sort()排序
reverse()逆序
(Vue将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新，以上就是被包裹的方法。)

  <div id="app">
        <ul>
            <li v-for="item in list">
                {{ item }}
            </li>
        </ul>
        <button @click="list.push('你的名字')">尾部添加一个项</button>
        <button @click="list.pop()">尾部删除</button>        
        <button @click="list.shift()">头部删除</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                list:['龙猫','柯南','千与千寻'],
            },
            watch:{
                list(newValue,oldValue){
                    console.log('数组改变了',newValue,oldValue);
                }
            }
        })
    </script>

在数组中使用侦听器总结:
1.彻底替换为一个新数组,那么可以被侦听到。
2.如果使用了push(()等标准的数组操作方法,那么可以被侦听到。
3.如果直接修改数组的元素,那么无法被侦听到。

对象的使用

 <!-- 对对象进行侦听 -->
    <div id="app">
    <p>{{ obj.name }} --- {{ obj.age }} --- {{ obj.height }}</p >
        <button @click = "obj.name ='rose'">修改obj的name属性</button>
        <button @click = "obj.age = 30">修改obj的age属性</button>
        <button @click = "obj = {name:'andy',age:99} ">修改obj的指向</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                obj:{
                    name:'jack',    
                    age:16, 
                    height:175
                },
            },
            watch:{
               "obj.name"(newValue,oldValue){
                   console.log('name改变了',newValue,oldValue);
               } 
            }       
        })
    </script>