vue中的watch使用

基本概念：

​ 观察 Vue 实例上的一个表达式或者一个计算属性的变化。回调函数得到的参数为新值和旧值，在回调函数中可以进行一些异步操作或开销较大的操作。表达式只接受简单的键路径。对于更复杂的表达式，可以用一个函数取代。

​ 简单理解就是通过Vue实例上的数据变化去进行相应的操作，以满足需求。

基本数据类型的监听

 <div id="app">
        <input type="text" v-model="text1">
        <p>{{text2}}</p>
        <button @click="change">普通按钮</button>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.2/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                text1:'',
                text2: ''
            },
            watch:{
                text1(newV,oldV){
                    console.log(newV,oldV);
                    this.text2 = newV;
                    
                }
            },
            methods:{
                change(){
                    this.text1 += 1;
                    
                }
            }
        })
    </script>

对象的监听

对象的监听需要使用handler函数进行监听

注意：在变更 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 并不会保留变更之前值的副本。

可以添加两个选项：

deep 值为一个布尔值，添加该选项为true才能发现对象内部键值的变化

immediate 值为一个布尔值， 添加该选项为true表示立即以当前表达式触发一次回调

添加immediate为true时：只会在初始化时触发一次，之后改变都不会触发

<script>
        var vm = new Vue({
            el:'#app',
            data:{
                object:{
                    a : 12,
                    b : 13
                }
            },
            watch:{
                object : {
                    handler(newV , oldV) {
                        console.log(newV)
                        if(newV.a >= 15) {
                            console.log(123)
                        }
                    },
                    // deep: true,
                    immediate: true
                }    
            },
            methods:{
                change(){
                    this.object.a++
                    
                }
            }
        })
    </script>

添加deep:true 同时，在一定条件下执行某些操作:

<script>
        var vm = new Vue({
            el:'#app',
            data:{
                object:{
                    a : 12,
                    b : 13
                }
            },
            watch:{
                object : {
                    handler(newV , oldV) {
                        console.log(newV)
                        if(newV.a >= 15) {
                            console.log(123)
                        }
                    },
                    deep: true,
                    immediate: true
                }    
            },
            methods:{
                change(){
                    this.object.a++
                    
                }
            }
        })
    </script>

为什么图中的object.a是16呢，因为对象保存的是引用值，又点击了一次按钮，此时object已经变成了{ a: 16 , b : 13}

监听对象中的某个值：

<div id="app">
        
        <button @click="change">普通按钮</button>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.2/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                object:{
                    a : 12,
                    b : 13
                }
            },
            watch:{ 
                'object.a': {
                    handler(newV){
                        console.log(newV);
                    },
                    immediate : true
                }
            },
            methods:{
                change(){
                    this.object.a++
                    
                }
            }
        })
    </script>

当然了，在一个需求中发现路由对象也可以进行监听，分享代码给大家

watch : {
        $route: {     //监视路由
            handler(newV , oldV) {
                const path = newV.path;  //当路由发生变化时，是可以监听到变化的，然后进行相应的操作就好了
                let idx = this.timeLineList.findIndex(item  => {
                    return item.path == path
                });
                this.timeIndex = idx;
            },
            immediate: true,
            deep: true
        }

    },