Vue2.0-侦听器

最新推荐文章于 2025-04-03 22:32:45 发布

一心想进字节的小阿涵

最新推荐文章于 2025-04-03 22:32:45 发布

阅读量829

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/Java_young_man/article/details/124852232

版权

Vue 专栏收录该内容

6 篇文章

订阅专栏

Vue2.0-侦听器

文章目录

- Vue2.0-侦听器

1.什么是侦听器

我们都知道data里面可以定义数据，data里面的数据是可以发生变化的，如果我们需要对这些数据进行监听的话，我们可以用到vue里面的侦听器，我们可以定义一个侦听器，来监视data里面的某个数据变化，只要数据发生变化，我们就可以在侦听器里面做出变化。

2.watch侦听器

2.1什么是watch侦听器

watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作
语法格式:

const vm=new Vue({
    el:'#app',
    data:{
        massage:''
    },
    //监听 massage 值得变化
    //newVal 时"变化后的新值",oldVal是"变化之前得旧值"
    watch:{
        massage(newVal,oldVal){
            console.log(newVal,oldVal)
        }
    }
})

案例:

<body>
    <div id="app">
    <input type="text" v-model="massage">
    </div>
    <script src="../Vue/vue.js"></script>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                massage:'zh'
            },
            watch:{
                massage(newVal,oldVal){
                    console.log("新值:"+newVal,"旧值:"+oldVal)
                }
            }
        })
    </script>
</body>

在这里插入图片描述

2.2侦听器的格式

1.方法格式的侦听器
缺点1:无法在刚进入页面的时候，自动触发
缺点2:如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器
2.对象格式的侦听器
好处1:可以通过immediate，让侦听器自动触发
好处2:可以通过deep选项，让侦听器深度监听对象中的每个属性的变化
immediate选项
默认情况下，组件在初次加载完毕后不会调用watch侦听器。如果想让watch侦听器立即被调用，则需要使用immediate选项

<body>
    <div id="app">
    <input type="text" v-model="massage">
    </div>
    <script src="../Vue/vue.js"></script>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                massage:'zh'
            },
            watch:{
                //定义对象格式得侦听器
                massage:{
                    //侦听器得处理函数
                    handler(newVal,oldVal){
                        console.log(newVal,oldVal);
                    },
                    //true 表示进来就会触发一次
                    //默认值为false newVal 为 undefined
                    //作用就是控制侦听器是否自动触发一次
                    immediate:true
                }
            }
        })
    </script>
</body>

2.3侦听器-deep深度侦听

如果watch侦听是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要用到deep选项
开启深度侦听，只要对象中任何一个属性变化了，都会触发"对象的侦听器"

<body>
    <div id="app">
    <input type="text" v-model="info.massage">
    </div>
    <script src="../Vue/vue.js"></script>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                info:{
                    massage:'zh'
                }
            },
            watch:{
                info:{
                    handler(newVal){
                        console.log(newVal)
                    },
                    deep:true
                }
            }
        })
    </script>
</body>