5.Vue监视属性

定义

监视一个属性, 当被监视的属性变化时, 回调函数自动调用, 进行相关操作。

监视的属性必须存在，才能进行监视。

用法

1.new Vue时传入watch配置。
完整写法:

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            a:1,
        },
        watch:{
            a:{
                handler(newValue,oldValue){
                    console.log('a被修改了',newValue,oldValue)
                }
            }
        }
    })
</script>

简写(只需要用到handler时):

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            a:1,
        },
        watch:{
            a(newValue,oldValue){
                console.log('a被修改了',newValue,oldValue)
            }
        }
    })
</script>

2.通过vm.$watch监视。
完整写法:

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            a:1,
        }
    })
    vm.$watch('a',{
			handler(newValue,oldValue){
				console.log('a被修改了',newValue,oldValue)
			}
		})
</script>

简写(只需要用到handler时):

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            a:1,
        }
    })
    vm.$watch('a', function(newValue, oldValue){
        console.log('a被修改了', newValue, oldValue)	
    })
</script>

监视属性配置

配置位置

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            a:1,
        },
        watch:{
            a:{
                xxx: yyy// 监视属性配置写在这里
                handler(newValue,oldValue){
                    console.log('a被修改了',newValue,oldValue)
                }
            }
        }
    })
</script>

初始化时让handler调用一次

immediate:true

深度监视

deep:true
作用举例:

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            demo: {
                a: 1,
                b: 1,
                c: {
                    d:2,
                    e:3
                }
            }
        },
        watch:{
            demo:{
                handler(newValue,oldValue){
                    console.log('demo被修改了',newValue,oldValue)
                }
            }
        }
    })
</script>

如上所示, demo是一个对象, 监视demo的时候实际上是监视demo指向的地址, 当demo.a或者demo.c.d发生变化时, demo指向的地址并不会变化, 因此watch监视不到这种变化。如果需要监视这种变化,加上deep:true即可。
如下所示:

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            demo: {
                a: 1,
                b: 1,
                c: {
                    d:2,
                    e:3
                }
            }
        },
        watch:{
            demo:{
                deep:true,
                handler(newValue,oldValue){
                    console.log('demo被修改了',newValue,oldValue)
                }
            }
        }
    })
</script>

computed和watch的区别

1.computed能完成的功能，watch都可以完成。(当然这里并不是鼓励将所有的computed替换成watch, 能用computed完成的场景往往使用computed更加方便, 所以使用computed还是watch需要视场景而定。)

2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作(定时器的回调函数、ajax的回调函数等)。假设计算属性fullName需要在firstName或lastName改变的1秒后获取到值:

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三',
        },
        computed:{
            fullName:{
                get() {
                    setTimeout(()=>{
                        return this.firstName + '-' + this.lastName
                    },1000)
                }     
            }
        }
    })
</script>

这个例子中, fullName 并不能获取到预期的返回值 张-三, 这是因为计算属性 fullName 获取到的值依赖于其 getter 中 return 的值, 而例子中的 return 实际上是给 setTimeout 的回调函数的返回值。

这种场景下就需要用watch来完成任务:

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三',
            fullName:'张-三'
        },
        watch:{
            firstName(val){
                setTimeout(()=>{
                    this.fullName = val + '-' + this.lastName
                },1000);
            },
            lastName(val){
                setTimeout(()=>{
                    this.fullName = this.firstName + '-' + val
                },1000);
            }
        }
    })
</script>

注意:
1.所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。