监听watch 和深度监听

最新推荐文章于 2025-12-11 08:58:14 发布

原创最新推荐文章于 2025-12-11 08:58:14 发布 · 243 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #html5

本文介绍了如何在Vue.js中使用深度监听（deep）来监视对象内部属性的变化，通过实例演示了如何在`data`对象中设置学生对象，并在对象属性改变时触发警告。读者将学会如何正确处理复杂数据结构的监听需求。

<body>
       
        <div id="app">
            <p>{{name}}</p>
        </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            name:"小明"
        },
    })

    vm.$watch('name', function() {
        alert("name发生了变化");
        // this.name = "狗蛋";
    })
    document.onclick = function() {
        vm.name = 1234;
    }
</script>

深度监听

当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，比如我们 data 里有一个student对象，

需要深度监听，使用deep就可以了。

<body>
       
        <div id="app">
            <p>{{student.name}}</p>
        </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            name:"小明",
            student:{
                name:"123",
                age:12
            }
        },
    })

    vm.$watch('student', function() {
        alert("student.name发生了变化");
    },{
        deep:true
    })

    document.onclick = function() {
        vm.student.name="张三"
    }

    // 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，比如我们 data 里有一个student对象，
    // 深度监听价格deep就可以了。
</script>