vue 监听属性 watch

想搞技术

已于 2022-08-31 17:55:57 修改

阅读量786

点赞数

分类专栏： vue 文章标签：前端 javascript 开发语言

于 2022-08-29 18:06:42 首次发布

本文链接：https://blog.csdn.net/weixin_57742734/article/details/126588583

版权

vue 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

监听属性watch：

1、当被监听属性变化时，回调函数自动调用，进行相关操作。

2、监听的属性必须存在，才能进行监听。

3、监听的两种写法：

（1）：在vue实例中传入watch配置。

（2）：通过vue实例对象vm使用.$watch监听。

具体例子：（注释解释说明）

<body>
    <div class="a" id="a">
        省：<input type="text" v-model.lazy="province"> <br><br>
        市：<input type="text" v-model.lazy="city"> <br><br>
        位置：<span>{{ area }}</span> <br><br>
        修改位置：<input type="text" v-model.lazy="area"> <br><br>
        <hr>
        随行人数: <input type="text" v-model.lazy="number.a"> <br><br>
        <hr>
        前往地区：<input type="text" v-model.lazy="place">
    </div>
    <script>
        var vm = new Vue({
            el: '#a',
            data: {
                province : '吉林',
                city : '长春',
                number: {
                    a:5,
                    b:0,
                },
                place:'快乐星球',
            },
            //计算属性
            computed:{
                area:{
                    get(){
                    console.log('get方法被调用')
                    return this.province + '-' + this.city
                    },
                    set(area){
                        console.log('set方法被调用')
                        const arr = area.split('-')
                        this.province = arr[0]
                        this.city = arr[1]
                        
                    }
                }},
            //监视属性
            watch:{
                //监听计算属性/一级属性
                area:{
                    handler(newValue,oldValue){
                        console.log('area被修改',newValue,oldValue)
                    }
                },
                //监听多级属性
                number:{
                    immediate:true,   //初始化调用handler一次
                    deep:true,    //深度监视
                    handler(){
                        console.log('number被修改')
                    }
                },
                //监听简写   简写方法没有immediate，deep等配置项
                city(newValue,oldValue){
                    console.log('city被修改',newValue,oldValue)
                },
            },
        }
        );
        //不在vue实例下的监视方法
        vm.$watch('province',{
            handler(newValue,oldValue){
                console.log('province被修改',newValue,oldValue)
            }
        });
        //不在vue实例下的简写方法，简写方法没有immediate，deep等配置项
        vm.$watch('place',function(newValue,oldValue){
            console.log('place被修改',newValue,oldValue)
        })

    </script>
</body>

网页初始状态：

位置由计算属性将省和市通过'-'连接得到，所以初始时即调用了get函数。

点击查看计算属性简单例子

其他属性均通过{{}}插值法实现

number监听被触发，因为immediate:true配置会在初始时调用handler方法一次，同时number为多级结构，在vm实例中只能监听到number对象而我们监听的是number对象下的a属性，所以需要深度监听所以在配置项中添加了deep:true配置，实现多级监听，否则无法监听到a属性的变化。