Vue.js笔记------侦听器

最新推荐文章于 2023-01-15 21:02:54 发布

HSL521224

最新推荐文章于 2023-01-15 21:02:54 发布

阅读量110

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_69270668/article/details/127107528

版权

1.侦听器的基本结构

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

2.侦听器的基本使用

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

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

    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'你好'
            },
            //写侦听器的地方
            watch:{
                //侦听的数据变化
                //基本数据类型，这两个参数有意义。
                msg(newValue,oldValue){
                    console.log('数据改变了',newValue,oldValue);
                }
            }
        })
    </script>
</body>

3.侦听器在数组中的使用

<body>
    <div id="app">
        <ul>
            <li v-for="item in list">
                {{item}}
            </li>
        </ul>
        <button @click="list.push('大鱼海棠')">添加一个项</button>
        <button @click="list.pop()">删除一个项</button>
    </div>

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

    <script>
        new Vue({
            el:'#app',
            data:{
                list:['龙猫','名侦探柯南','千与千寻','你的名字']
            },
            watch:{
                //复杂数据类型，这两个参数没有意义，因为地址没变。
                //所以复杂类型中，一般不会写两个参数，因为这两个参数的值是一样的，就算写也只写一个。
                list(newValue,oldValue){
                    console.log('数据改变了',newValue,oldValue);
                },
            }
        })
    </script>
    
</body>

<body>
    <!--
    【对数组进行侦听】
    数组是应用类型,存在比较复杂的侦听规则。
    从理论上说，修改一个数组的内容，比如修改数组中某个元素的值,或者给数组添加新的元素,都不会修改数组本身的地址。
    为此.Vue.is对数组做了特殊处理,使得使用标准的数组操作方法对数组所做的修改,都可以被侦听到。

    1.Vue不能检测以下数组的变动:
    a.当你利用索引值直接设置一个数组时,例如:vm.items[index0fItem] = newValue 
    b.当你修改数组的长度时,例如:vm.items.length = newlength

    2.使用标准方法修改数组可以被侦听到
    https://v2.cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B 
    push() 尾部添加 
    pop()尾部删除
    unshift()头部添加 
    shift()头部删除
    splice()删除、添加、替换 
    sort()排序 
    reverse()逆序
    (Vue将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新,以上就是被包裹的方法。)
     -->
    <div id="app">
        <button @click="list.push('蜡笔小新')">添加一个项</button>
        <button @click="list.pop()">删除一个项</button>
        <!-- 利用索引值改变数组时,不能被侦听到。 -->
        <button @click="list[0] ='病猫'">修改第一项</button>
        <button @click="list.splice(1,0,'天气之子')">第二项添加</button>
        <ul>
            <li v-for="item in list">
                {{ item }}
            </li>
        </ul>
    </div>
    <script src="../../vue.js"></script>
    <script>
        new Vue({
            el:'#app', 
            data:{
                list:['龙猫','名侦探柯南 ','千与千寻','你的名字']
            },
            watch:{
                list(){
                    console.log('数组改变了');
                }
            }
        })
        //在数组中使用侦听器总结:
        // 1.彻底替换为一个新数组,那么可以被侦听到。
        // 2.如果使用了push()等标准的数组操作方法,那么可以被侦听到。
        // 3.如果直接修改数组的元素,那么无法被侦听到。
        //(解决方法:使用$set(()方法修改元素的值。Vue3语法。)
        // 不要使用length属性来修改数组长度,而改用其他标准方法显示数组长度的变化。
    </script>
</body>

4.侦听器的完整写法

<body>
    <!-- 对对象进行侦听 -->
    <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对象内部属性的变化，
                // 只能侦听到obj对象指向的变化。
                // obj(){
                // console.log('obj变化了'); 
                // },

                // 如果想侦听到对象里属性的变化.
                // 侦听obj里name的变化(要记得加引号)
                // "obj.name"(){
                // console.log('name变化了'); 
                // },
                // 可是这样写只能侦听一个属性。
                // 如果希望侦听到对象里所有属性的变化,就要开启深度侦听。 
                obj:{
                // 当有变化会调用的函数 
                    handler(){
                        console.log('obj的属性变化了');
                    },
                    // 开启深度侦听
                    // deep:true,

                    //要不要当前页面一打开就立即调用handler函数。
                    //给true表示立即调用,默认是flase。(代表只有改动了才调用
                    // immediate:true
                }
            }
        })
    </script>
</body>