Vue : 监视属性

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

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

目录

一个案例

监听属性

handler

immediate 

vm.$watch('xxx')

 深度监视

监视的简写

computed和watch之间的区别


一个案例

<!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 ++;
                    },
                
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值