Blog of CodeJELLOW’S ENGINEERING NOTES
← 返回文章

VUE3(七)侦听器

VUE3(七)侦听器 基本使用 配置选项 其它方式

基本使用

可以参考安卓的Observer

在option中增加watch对象,对象中定义要侦听的属性的函数,函数名为属性名,第一个参数是改变后的值(新值),第二个参数是改变前的值(旧值)

TEXT
            // question侦听的data中属性的名称
            // newValue变化后的新值
            // oldValue变化前的旧值
            // 安卓中的observer
            watch:{
                question(newValue,oldValue){
                    console.log("新值:",newValue,"旧值:",oldValue);
                    this.queryAnswer();
                }
            }

每当侦听的变量发生改变时就会调用这个方法。

配置选项

deep深度监听;immediate立即执行

TEXT
            watch:{
                // 默认情况下侦听器只能侦听数据本身的改变(内部改变不能侦听)
                // info(newInfo, oldInfo){
                //     console.log("new Value", newInfo,"old Value", oldInfo);
                // }
                // 上面是下面的语法糖
                info: {
                    handler: function(newInfo, oldInfo){
                        console.log("new Value", newInfo,"old Value", oldInfo);
                    },
                    // 深度侦听
                    deep: true,
                    // 立即执行
                    immediate: true
                }
            }

其它方式

只监听内部的一个属性:

TEXT
            watch:{
                "info.name": function (newValue, oldValue) {
                    console.log(newValue, oldValue);
                }
            }

通过生命周期来绑定侦听器,在options中的created中:

TEXT
            created(){
                const unwatch=this.$watch("info",function (newValue, oldValue) {
                    console.log(newValue, oldValue);
                },{
                    deep: true,
                    immediate: true
                });
                // 取消侦听
                // unwatch();
            }

该方法会返回一个unwatch,可以调用之以取消侦听。

通过 RSS 订阅更新 →