vue.js的监听属性默认只能监听到对象的一级数据的变化,比如attr.a:

data:{
      attr:{
            a:1,
            b:2
      }
},

监听不到一级以上的数据,比如:attr.a.a1

data:{
      attr:{
            a:{
               a1:1,
            },
            b:2
      }
},

原因是因为没有开启deep属性为true,默认是false,只监听到一级对象。下面是详细代码:

<!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>没事练一下Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>
<body>
    <div id="demo">

    </div>

    <script>
        Vue.config.productionTip=false;
        const vm = new Vue({
            el:'#demo',
            data:{
                attr:{
                    a:{
                        a1:1,
                    },
                    b:2
                }
            },
            computed:{

            },
            watch:{
                'attr.a':{
                    deep:false,
                    handler(){
                        console.log('深度属性变了');
                    }
                }
            }
        })
    </script>
</body>
</html>

调试时,在浏览器控制台输入vm.attr.a.a1=任意值即可测试。

点赞(0) 打赏

Comment list 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部