Vue-13、Vue深度监视

发布时间：2024年01月10日

1、监视多级结构中某个属性的变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>watch深度监视</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
    <hr>
    <h3>a的值是：{{numbers.a}}</h3>
    <button @click="numbers.a++">点我让a+</button>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false;
    const vm = new Vue({
        el:"#root",
        data:{

            numbers:{
                a:1,
                b:2,
            }
        },
         watch:{
            //监视多级结构中某个属性的变化
             'number.a':{
                 handler(newvalue, oldvalue) {
                     console.log(newvalue,oldvalue);
                 }
             }
        }
    });
</script>
</body>
</html>

2、监视多级结构中所有属性的变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>watch深度监视</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
    <hr>
    <h3>a的值是：{{numbers.a}}</h3>
    <button @click="numbers.a++">点我让a+</button>
    <hr>
    <h3>b的值是：{{numbers.b}}</h3>
    <button @click="numbers.b++">点我让b+</button>

</div>
<script type="text/javascript">
    Vue.config.productionTip=false;
    const vm = new Vue({
        el:"#root",
        data:{
            numbers:{
                a:1,
                b:2,
            }
        },
         watch:{
            //监视多级结构中某个属性的变化
             'number.a':{
                 handler(newvalue, oldvalue) {
                     console.log(newvalue,oldvalue);
                 }
             },
            //监视多级结构中所有属性的变化。
             numbers: {
                 deep:true,
                 handler(newvalue, oldvalue) {
                     console.log(newvalue,oldvalue)
                 }
             }

        }
    });
</script>
</body>
</html>

3、监视简写 当只有handler 时简写如下：

在这里插入图片描述

文章来源:https://blog.csdn.net/ChenJin_2/article/details/135507185
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章