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);
            }