Vue中的watch(监听)-优快云博客

本文链接：https://blog.youkuaiyun.com/ajdhakj6/article/details/128440712

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>