vue侦听器

侦听器

侦听器 watch 和computed（计算属性）一样 是vue组件配置选项中的一个
侦听器本质上也是一个函数 他主要用来监听数据的变化（侦听器 watch主要用来侦听data或computed这二个数据）
我们使用的时候 要侦听那个数据 就用那个数据名作为方法名即可

基本语法：

 //【侦听器】
        //作用:用来侦听数据有没有变化,一旦有变化就调用函数。
        //语法:在和data、methods这些平级的位置写一个watch
        new Vue({
            el:'',
            data:{},
            methods:{},
            //侦听器
            wathch:{
                //参数一：改变后的值
                //参数二:改变前的值
                要侦听的数据(newValue,oldValvue){
                    
                }
            }
        })

侦听器的基本使用：

<div id="app">
     <button @click="msg = 'ccs'">修改msg的值</button>
     <p>{{ msg }}</p>
    </div>

    <script src="./vue.js"></script>

    <script>  
        new Vue({
            el:'#app',
            data:{
                msg:'你算哪个小饼干'
            },
            // 写侦听器的地方
            watch:{
                //侦听的数据变化
                //基本数据类型，这两个参数有意义。
                msg(newVal,oldVal){
                    //侦听到数据变化之后，需要完成的行为。
                    console.log('数据变了',newVal,oldVal);
                }
                
            }
        })

效果图：

修改前：

修改后：

侦听器在数组的使用：

【对数组进行侦听】

        数组是应用类型,存在比较复杂的侦听规则。

        从理论上说,修改一个数组的内容,比如修改数组中某个元素的值,或者给数组添加新的元素,都不会修改数组本身的地址。

        为此, 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>
       
    </div>

    <script src="./vue.js"></script>

    <script>
        new Vue ({
            el:'#app',
            data:{
                list:['彭聪历险记','彭聪大战万方','彭聪来了']
            },
            watch:{
                list(val,old){
                    console.log('数组发生了改变',val,old);
                }
            } 
        })

在数组中使用侦听器总结:

        1.彻底替换为一个新数组,那么可以被侦听到。

        2.如果使用了push()等标准的数组操作方法,那么可以被侦听到。

        3.如果直接修改数组的元素,那么无法被侦听到。

        (解决方法:使用$set()方法修改元素的值。Vue3语法。)

        不要使用length属性来修改数组长度,而改用其他标准方法显示数组长度的变化。