侦听器基本结构和使用

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

zcyycz_

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

阅读量353

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/zcyycz_/article/details/127120516

版权

侦听器

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

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

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

侦听器的基本使用1

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

侦听器基本使用2

<body>
    <div id="app">
        <button @click="list.push('鬼怪')">添加一个项</button>
        <button @click="list.pop()">删除一个项</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(newVal,oldVal){
                    console.log('数组改变了',newVal,oldVal);
                }
            }
        })
    </script>
</body>

侦听器基本使用3

<body>
    <div id="app">
        <button @click="list.push('111')">添加一个项</button>
        <button @click="list.pop()">删除一个项</button>
        <!--利用索引值改变数组时，不能被侦听到-->
        <button @click="list[0] = '22' ">修改第一项</button>
        <button @click="list.splice(1,0,'3333')">第二项添加</button>
        <ul>
            <li v-for="item in list">
                {{ item }}
            </li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                list:['5555','6666','7777','8888']
            },
            watch:{
                list(){
                    console.log('数组改变了');
                }
            }
        })
    </script>
</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:{
    handler(){
    console.log('obj的属性变化了');
},
}
    }
    })

这种写法侦听不到obj对象内部属性的变化，只能侦听到obj对象指向的变化

obj(){

console.log('obj变化了');

如果想侦听到对象里属性的变化

侦听obj里name的变化(要加引号)

"obj.name"(){

console.log('name变化了');

}，

如果希望侦听到对象里所有属性的变化,就要开启深度侦听

开启深度侦听： deep:true,

要不要当前页面一打开就立即调用handler函数

给true表示立即调用,默认是flase ，代表只有改动了才调用

在数组中使用侦听器:

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

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

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

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

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

标准方法修改数组可以被侦听到：

push()尾部添加

pop()尾部删除

unshift()头部添加

shift()头部删除

splice()删除、添加、替换

sort()排序

reverse()逆序

zcyycz_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
侦听器基本结构和使用

不要使用length属性来修改数组长度,而改用其他标准方法显示数组长度的变化。这种写法侦听不到obj对象内部属性的变化，只能侦听到obj对象指向的变化。(解决方法:使用$set(()方法修改元素的值 Vue3语法)如果使用了push()等标准的数组操作方法,那么可以被侦听到。console.log('obj变化了');如果希望侦听到对象里所有属性的变化,就要开启深度侦听。侦听obj里name的变化(要加引号)如果直接修改数组的元素,那么无法被侦听到。如果想侦听到对象里属性的变化。
复制链接

扫一扫