侦听器基本用法

最新推荐文章于 2024-03-03 07:45:00 发布

`秋刀鱼`

最新推荐文章于 2024-03-03 07:45:00 发布

阅读量342

点赞数

文章标签： servlet java spring

本文链接：https://blog.csdn.net/s8459/article/details/127126707

版权

本文详细介绍了Vue.js中的侦听器（watch）的基本结构和使用方法，包括基本数据类型和数组的侦听。对于数组，重点讲解了Vue如何处理数组变化的特殊情况，以及如何通过标准数组方法实现侦听。此外，还展示了对象的深度侦听，以及在对象属性变化时的处理。文章最后提供了多个实例，帮助读者理解并掌握Vue中侦听器的完整使用技巧。

摘要由CSDN通过智能技术生成

侦听器的基本结构：

笔记：

<script>

// 侦听器：

// 作用：用来侦听数据有没有变化，一旦有变化就调用函数

// 语法：在data、methods这些平级的位置写一个watch

new Vue ({

el:'',

data:{},

methods:{},

// 侦听器

watch:{

//参数一：改变后的值

//参数二：改变前的值

要侦听的数据(newvalue,oldvalue){

}

}

})

</script>

侦听器的基本使用：

<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>

侦听器在数组的使用1：

<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>

侦听器在数组中的使用2：

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

1.Vue不能检测以下数组的变动:
a.当你利用索引值直接设置一个数组时,例如:vm.items[indexOfItem] = 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">
        <ul>
            <li v-for="item in list">
                {{ item }}
            </li>
        </ul>
        <button @click="list.push('笼中鸟')">添加一个数据</button>
        <button @click="list.pop()">删除一个数据</button>
        <button @click="list.unshift('病变')">头部添加</button>
        <!-- 利用索引值改变数组时，不能被侦听到 -->
        <button @click="list[0]='迷失的自我' ">修改第一项</button>
        <button @click="list.splice(1,0,'浪漫主义')">第二项添加</button>
    </div>

    <script src="../vue.js"></script>
        
    <script>
        new Vue ({
            el:'#app',
            data:{
                list:['迷失的心跳','念念不忘','天气之子','最后一页']
            },
            watch:{
                // 复杂数据类型，这两个参数没有意义，因为地址没有改变
                // 所以复杂类型中，一般不会写这两个参数因为这两个参数的值是一样的，就算写也只写一个
                list(newvalue,oldvalue){
                    console.log('数组改变了',newvalue,oldvalue);

                }

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

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

侦听器的完整写法:

 <!-- 对对象进行侦听 -->
        <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
        }
    }
})