二十三、watch监听

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。Vue通过watch选项提供了一个更通用的方法，来响应数据的变化。

当需要在数据变化时执行异步操作或开销较大的操作时，这个方式是最有用的。

在实际开发中可以解决自定义封装组件或是插件，异步初始化数据获取不到的问题。

（1）可以监听data里面数据的变化。

        1>data数据没有对象嵌套。

        2>data数据出现对象嵌套，想改变对象里面某一属性值。

        3>data数据出现数组多层嵌套。这时要用watch的深度监听功能，来监听数据的变化。

（2）可以监听computed里面属性的变化。

（3）可以监听路由的变化。

功能比computed更强大。

<template v-if='false'><!--（1）1>data数据没有对象嵌套。-->
    <input type="text" :value='name'><button type="button" @click="name='李四'">改名</button>
</template>
<script>
    let data={
        name:'张三'
    }
    watch:{
        name(newVal,oldVal){
            console.log("更新后："+newVal+","+"更新前："+oldVal);
        }
    }
</script>

<template v-if='false'><!--（1）2>data数据出现对象嵌套，想改变对象里面某一属性值。-->
    <input type="text" :value='classify.children.title'><button type="button" @click="classify.children.title='猪肉串'">更新</button>
</template>
<script>
    let data={
        classify:{
            title:'肉类',
            children:{title:'羊肉串'}
        }
    };
    watch:{
        "classify.children.title"(newVal,oldVal){//（1）2>data数据出现对象嵌套，想改变对象里面某一属性值。
            console.log("更新后："+newVal+","+"更新前："+oldVal);
        }     
    }
</script>

<template><!--（1）3>data数据出现数组多层嵌套。这时要用watch的深度监听功能，来监听数据的变化。--><input type="text" :value='classifyArr[0].children[0].title'>
    <button type="button" @click="classifyArr[0].children[0].title='啤酒'">更新</button>
</template>
<script>
    let data={
        classifyArr:[
            {
                title:'肉类',
                children:[
                    {title:'羊肉串'},
                    {title:'猪肉串'},
                    {title:'牛肉串'}
                ]
            },
            {
                title:'饮料',
                children:[
                    {title:'可乐'},
                    {title:'雪碧'},
                    {title:'美年达'}
                ]
            }
        ]
    }
    
    watch:{
        classifyArr:{//（1）3>data数据出现数组多层嵌套。这时要用watch的深度监听功能，来监听数据的变化。
            handler(val){//（注意：handler是Vue系统自带的方法，必须写这个方法名）
                console.log(JSON.stringify(val));
                //输出结果：[{"title":"肉类","children":[{"title":"啤酒"},{"title":"猪肉串"},{"title":"牛肉串"}]},{"title":"饮料","children":[{"title":"可乐"},{"title":"雪碧"},{"title":"美年达"}]}]
            },
            deep:true//深度监听
        }
    }
</script>

<template v-if='false'><!--（2）可以监听computed里面属性的变化。-->
    <input type="text" :value='name'><button type="button" @click="name='李四'">改名</button>
</template>
<script>
    let data={
        name:'张三',
    }
    new Vue({
        //...
        computed:{
            getName(){
                return this.name;
            }
        },
        watch:{
            getName(newVal,oldVal){//（2）可以监听计算属性getName
                console.log("更新后："+newVal+","+"更新前："+oldVal);
            },
        }
    })
</script>