Vue中的watch(监听)

最新推荐文章于 2024-03-25 11:09:46 发布

进阶的菜熊

最新推荐文章于 2024-03-25 11:09:46 发布

阅读量8.9k

点赞数 7

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

本文链接：https://blog.csdn.net/qq_44998582/article/details/122333475

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

vue中用watch来监视data数据的变化，当被监视的数据发生变化watch中定义的相关方法便会被调用。

watch语法

//第一种方法：用于不需要配置项，只需一个handler
watch:{
key:function(newval,oldval){},
"obj.key":function(newval,oldval){}
}
//key为所要监视的属性名（名称要与data中的一致对应）
//newval与oldval为自动传过去参数，不需要手动传，newval为当前属性改变后的值，oldval为当前属性改变前的值

//第二种方法:需要配置项
watch:{
key:{
    deep:false,
    handler(newval,oldval){}
    },
"obj.key":{
    deep:false,
    handler(newval,oldval){}
    }
}

在语法中我们看到关于属性名有两种写法这里对这两种写法做个解释。

第一种是为data对象中普通的属性添加监视器时

data:{
message:'i love china'
},
watch:{
message:function(){}
}

第二种则是为data中对象的属性添加监视器时

data:{
    obj:{
        messgae:'i love china'
        }
}.//在想要监听的数据是一对象中的属性时则需要使用第二种方法
watch:{
    "obj.message":function{}
}

下面通过一个例子来演示watch的具体实现。

例子：当点击按钮就让temp加一，temp使用watch去监视。

<body>
    <div id="app">
        <button @click='add'>增加</button>
    </div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            temp: 0,
            school:{
            teacher:'zs'
            }
        },
        methods: {
            add() {
                this.temp++
            }
        },
        watch: {
            temp() {
                    console.log('temp现在加一了=' + this.temp)
            },
            "school.teacher"() {
                console.log('aini')
            }
        }
    })

</script>

在上面代码中我为按钮绑定了点击事件，一旦点击便会触发add方法，add中是对temp进行加一操作，因为temp设置了监听器，所以temp一改变监听器就会被触发，因此输出一串提示字符。另外，对school对象中的teacher进行改动时也会触发监听器

watch相关配置项

handler：function(newval,oldval){}。也可缩写为handler(newval,oldval)类似computed中的get()。当监听的数据改变handler便会被触发。

immediate:true|false。监听器是否立即执行，默认为false

immediate为false时watch会等待所监听的数据改变，当数据改变时才会触发handler。而为true时页面一加载handler便会立即执行

deep:true|false深度监听

深度监听

前面我们讲到如果要监听对象中的属性可以采用”obj.key“的方法，但是如果想要监听对象中所有的属性却只能一个个单独监听，这种做法显然是非常愚蠢。但不要担心，在vue中为我们提供了方法来监听对象中的所有属性---深度监听。它具体是怎么实现的呢？其实就是添加watch配置项deep

var app = new Vue({
        el: "#app",
        data: {
            school: {
                teacher: 'zs'
            },
            room: {
                desk: 1
            }
        },
        watch: {
            school: {
                handler() {
                    console.log('aini')
                }
            },
            room: {
                deep: true,
                handler() {
                    console.log('i am room')
                }
            }
        }
    })

因为Vue中的watch默认不监测对象内部值的改变，只能通过设置deep配置项来改变其监测深度，所以未加deep的school，当改变teacher的值时并不会触发handler，而加了deep的room在改变desk的值时会触发handler，说明监听起了作用。

全局watch

使用app.$watch('属性名')的方式进行定义

第一种方法：用于需要配置项
app.$watch('temp', {
        deep:true,
        handler(newval, oldval) {
            console.log(app.temp)
        })

第二种方法：用于不需要配置项，只需一个handler
 app.$watch('temp',function(newval, oldval) {
            console.log(app.temp)
        })

进阶的菜熊

关注

7
点赞
踩
32

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue中的watch(监听)

vue中用watch来监视data数据的变化，当被监视的数据发生变化watch中定义的相关方法便会被调用。watch语法//第一种方法：用于不需要配置项，只需一个handlerwatch:{key:function(newval,oldval){},"obj.key":function(newval,oldval){}}//key为所要监视的属性名（名称要与data中的一致对应）//newval与oldval为自动传过去参数，不需要手动传，newval为当前属性改变后的值，oldval
复制链接

扫一扫