Vue : 监视属性

最新推荐文章于 2025-03-18 15:57:16 发布

原创

最新推荐文章于 2025-03-18 15:57:16 发布 · 1.1k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端框架

本文详细介绍了Vue中watch和computed属性的监听机制，包括handler的作用、immediate设置、深度监视的使用以及两者的区别。通过实例演示了如何在Vue组件中监听数据变化并处理相应事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>

    <style>
        .classdiv {
            border: 1px solid green;
            margin: 5px;
        }
    </style>
</head>
<body>
        <div id="app">
            <div class="classdiv">
                <p>{
  
  {count}}</p>
                <p>{
  
  {user.name}}</p>
                <input type="button" value="增加count" @click="addCount">
                <input type="button" value="修改user.name" @click="updateName">
            </div>
        </div>
</body>
<script>
        var vue = new Vue({
                el: '#app',
                data: {
                    count : 1,
                    user : {
                        id : 1,
                        name : '博子妹妹'
                    }
                },
                methods: {
                    addCount() {
                        this.count ++;
                    },
                    updateName () {
                        this.user.name = '张三';
                    }
                },
                // 定义监听器
                watch : {
                    count :{
                        handler(newValue, oldValue) {
                            console.log(newValue, oldValue);
                        }
                    },
                    'user.name' : function(newVal,oldVal) {
                        console.log(newVal,oldVal);
                    }
                }
            });
</script>
</html>

点击 '增加count', 上面的数字一次一次的在增加至9, 后台:

监听属性

想要监听上述的count的值的修改, 就要在vm中加入监听属性:

        var vue = new Vue({
                el: '#app',
                data: {
                    count : 1,
                    user : {
                        id : 1,
                        name : '博子妹妹'
                    }
                },
                methods: {
                    addCount() {
                        this.count ++;
                    },