vue学习11.27

监视属性

watch: {

        isHot:{

        handler(){    }

        }

}

handler当isHot发生改变时调用。

watch: {
            isHot: {
                handler(newValue, oldValue) {
                    console.log('修改了', newValue, oldValue);

                }
            }
        }

有什么用吗:例如new和oldvalue差值过大,本例子就意味着温差过大,穿衣提示。

 immediate:true,初始化时让handler调用一下。

不光能监视data,也可以监视计算属性computed,

也可以用API

深度监视:

numbers: {

                a: 1,

                b: 2

            }

只监测a:

'numbers.a': {

                handler() {

                    console.log('a变了');

                }

怎么监视numbers的所有元素:

 numbers: {

                deep: true,

                handler() {

                    console.log('numbers 变了');

                }

            }

加上deep深度监视属性。

简写

isHot(newValue,oldValue){

        console.log('isHot 被修改了',newValue,oldValue)

}

vm.$watch('isHot',function(newValue,oldValue){

        console,log(        )

})

姓名案例:使用computed和watch都可以实现。

下面是watch属性实现的:

下面是计算属性:

计算属性完全靠返回值,不能进行异步任务,但是watch可以进行,

fullName(){
                console.log('get被调用');
                setTimeout(()=>{
                    return this.firstName + this.lastName
                },1000)
            }

这个代码想要让返回值等待1秒之后返回,但是错误为把return放到setTimeout函数中,但是fullName没有返回值了。而fullName是computed属性,又得依靠返回值,所以不能进行异步操作。

下面是watch实现异步:

 firstName(val){
                setTimeout(() => {
                    this.firstName = val+this.lastName
                }, 1000);
            },
            lastName(val){
                setTimeout(() => {
                    this.lastName = this.firstName+val
                }, 1000);
            }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值