vue3 watch侦听器

最新推荐文章于 2025-03-07 17:19:55 发布

blockchain beginner

最新推荐文章于 2025-03-07 17:19:55 发布

阅读量1.1k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_45783437/article/details/127187152

版权

本文详细介绍了Vue3中watch侦听器的用法，包括基本语法、特点、侦听数组的规则以及对象的监听。重点讲解了Vue如何处理数组变化以确保侦听生效，并提供了多个示例展示如何设置和使用侦听器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

watch侦听器

语法:

  new Vue({
            el:'',
            data:{
                要监听的值:''
            },
            methods:{},
            wathch:{
                //参数一:改变后的值.
                //参数二:改变前的值.
                要监听的值(newValue,oldValue){
                    
                }
            }
        })

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<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:'hi'
            },
            //写侦听器的地方
            watch:{
                //侦听的数据变化
                //基本数据类型,这两个参数有意义
                msg(newVal,oldVal){
                    //侦听到数据变化之后,需要完成的行为
                    console.log('数据改变了',newVal,oldVal);
                    
                }
            }
        })
    </script>
</body>
</html>

特点

特点1: 所有的侦听器要定义在watch节点下

特点2:侦听器本质为函数，要监视哪个数据的变化就把数据名作为方法名即可

特点3:侦听器的参数，新值在前，旧值在后

侦听数组

数组是应用类型,存在比较复杂的侦听规则。
从理论上说,修改一个数组的内容,比如修改数组中某个元素的值,或者给数组添加新的元素,都不会修改数组本身的地址。为此, Vue.js对数组做了特殊处理,使得使用标准的数组操作方法对数组所做的修改,都可以被侦听到。
特点1:Vue不能检测以下数组的变动

利用索引值直接设置一个数组时,例如:vm.items[indexOfItem] = newValueb.
直接修改数组的长度时,例如: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('666')">添加</button>
        <button @click="list.pop()">删除</button>
        <button @click="list[0] = '777' ">修改第一个项</button>
        <button @click="list.splice(1,0,'888') ">在第二个项添加</button>
    </div>
    <script src="../../../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                list:[1,2,3]
            },
            watch:{
              list(newVal,oldVal){
                console.log('数组改变了',newVal,oldVal);
              }  
  
            }
        })
    </script>

侦听对象

侦听对象指向的变化

        new Vue({
            el:'#app',
            data:{
                obj:{
                     name:'leo',
                     age:22,
                     sex:male
                }
            },
            watch:{
                obj(){
                      console.log('obj有变化');
                    }
                    
                }
            }
        })

侦听对象属性的变化

        new Vue({
            el:'#app',
            data:{
                obj:{
                     name:'leo',
                     age:22,
                     sex:male
                }
            },
            watch:{
               //记得加引号
                "obj.name"(){
                      console.log('obj有变化');
                    },
                    
                }
            }
        })

当对象变化时会调用函数/打开页面时自动调用函数/开启深度监听

        new Vue({
            el:'#app',
            data:{
                obj:{
                     name:'leo',
                     age:22,
                     sex:male
                }
            },
            watch:{
                obj(){
                      handler(){
                          console.log('obj有变化');
                    },

                    //开启深度监听
                    deep:true,

                    //是否开启打开页面时立即调用handler函数
                    immediate:true
                  }  
                }
            }
        })