vue watch用法，监听路由

第一种直接监听一个字段

结果如下：

通过watch来直接监测demo，如果demo的值变化，value的值也会跟着一起变化

第二种间接监听对象

<template>
    <div class="box">
        <input  type="text" v-model="demo.name" />
        value:{{value}}
        <br>
    </div>
</template>
<script>
export default {
  name: 'HelloWorld',
    data() {
        return {
            demo: {
                name: '',
            },
            value: '',
        };
    },
    computed:{
        newName(){
            return this.demo.name
        }
    },
    watch: {
        newName(val) {
            console.log("val",val)
            this.value = val;
        }
    }
}
</script>

结果如下：

如果watch监测的是一个对象的话，直接使用watch是不行的，此时我们可以借助于computed计算属性来完成

第三种 监听对象中的属性

效果如下：

第四种：监听对象中的所有属性的变化

<template>
  <div id="app">
    <input type="text" v-model="childrens.name"/><br>
    <input type="text" v-model="childrens.age"/>
  </div>
</template>
<script>
  export default {
    name: 'app',
    data(){
      return{
        childrens: {
          name: '',
          age: null,
        },
      }
    },
    watch:{
      childrens:{
        handler:function(val){
          console.log(val.name,val.age)
        },
        deep:true//对象内部的属性监听，也叫深度监听  必须要有否则监听不到
      },
    },
  }
</script>

注意细节：watch 监听是从第一次赋值都开始监听了

<template>
  <div id="app">
    <input type="text" v-model="childrens.name"/><br>
    <input type="text" v-model="childrens.age"/>
  </div>
</template>
<script>
  export default {
    name: 'app',
    data(){
      return{
        childrens: {
          name: '',
          age: null,
        },
      }
    },
    created(){
      this.childrens.name = "jjw";
      this.childrens.age = 10
    },
    watch:{
      childrens:{
        handler:function(val){
          console.log(val.name,val.age)
        },
        deep:true//对象内部的属性监听，也叫深度监听
        // 也可写上下边这一个，表示当我们监听的数据第一次被绑定的时候就开始监听
        immediate:true
      },
    },
  }
</script>

监听路由:

最后需要注意的是：

只要是监听的是路由，不管是子组件还是父组件还是没有相关连的组件，只要路由（不论是哪个地方的路由）发生了变化，这个地方的watch监听到的内部函数都会执行，

原因就是路由在开始的时候就已经进行了注册，所以路由是全局的，所以这里的监听也是全局的