Vue-watch监听

最新推荐文章于 2025-12-04 17:39:28 发布

原创最新推荐文章于 2025-12-04 17:39:28 发布 · 79 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

文章通过一个Vue实例展示了如何使用v-model绑定数据，并在数据变化时进行浅监听和深度监听。深度监听允许对嵌套数据对象的变更进行跟踪，而不仅仅是顶层属性的变化。在示例中，msg的改变触发了浅监听，检查手机号格式，而arr则应用了深度监听，每次数组内容变化时都会触发处理函数。

Vue的监听有前监听和深度监听，最简单来说的区别是深度监听可以监听数据变化，每当监听的数据变化时便会调用。

<!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>深浅监听</title>
    <script src="vue.js"></script>
</head>
<style>
    .colors{
        color: rgb(23, 207, 26);
    }
    .error{
        color: rgb(201, 31, 31);
    }
</style>
<body>
    <div class="app"> 
        <div >
            <input type="text" v-model="msg" placeholder="请输入手机号">
            <div :class="[xxx==='手机号输入正确' ? 'colors':'error']"> {{xxx}}</div>
           
        </div>
        <div>
            <input type="text" v-model="arr" >
            {{arr}}
        </div>
    </div>
</body>
</html>
<script>
    new Vue({
        el:".app",
        data:{
            xxx:'',
            msg:null,
            arr:[1,2,3,4]
        },
        watch:{
            //浅监听
            msg(newValue,oldValue){//newValue修改的数据，oldValuex旧数据
                const re=/^1+[13578][0-9]{9}$/;
                if(re.test(newValue)){
                    this.xxx="手机号输入正确"
                }
                else{
                    this.xxx='手机号输入不正确'
                }
                console.log(newValue,":newValue",oldValue,":oldValue")
            },
            arr:{
                //handler深度监听
                handler(newvalue){
                    console.log(newvalue,"深度监听")//数值改变进行的操作
                },
                //immediate不管是否改动都会执行一次
                immediate:true
            }
        }
    })
</script>