vue中事件监听watch

vue中的watch实际上是用来监听vue实例中的数据变化。

监听String

<template>
    <div @click="stringClick">{{msg}}</div>
</template>
<script>
export default {
    name: "jianting",
    data() {
        return {
            msg: "1223"
        };
    },
    watch: {
        msg: function(newVal, oldVal) {
            console.log("newVal:", newVal,  "oldVal:", oldVal) // 新值，旧值
        }
    },
    methods: {
        stringClick() {
            this.msg = Math.random() * 100;
        }
    }
};
</script>

监听对象

 <template>
    <div @click="click">
        <div>
        	姓名：{{obj.name}}，
        	年龄：{{obj.age}}，
        	他的儿女有：
        </div>
        <div 
        	v-for="(item, index) in obj.children" 
        	:key="index">
        	姓名：{{item.name}}，
        	年龄：{{item.age}}
        </div>
    </div>
</template>

<script>
export default {
    name: "jianting",
    data() {
        return {
            obj: {
                name: "Tony",
                age: 50,
                children: [
                    {
                        name: "小明",
                        age: 12
                    },
                    {
                        name: "小花",
                        age: 5
                    }
                ]
            }
        };
    },
    watch: {
        obj: {
            handler: function(newVal, oldVal) {
                console.log("newVal:", newVal);
                console.log("oldVal:", oldVal);
            },
            deep: true, // 深度监听
            immediate: true // 立即执行
        },
        
        // 监听对象中的某个值
        "obj.name": function(newVal, oldVal) {
            console.log("newVal obj.name:", newVal);
            console.log("oldVal obj.name:", oldVal);
        }
    },
    methods: {
        click() {
            this.obj.name = "未知";
        }
    }
};
</script>

watch监听对象的时候，需要加deep:true，只有这样才能深入底层去实时监听，没有加的话，对象是监听不到变化的,添加immediate时会在侦听开始之后被立即调用

监听路由

通过watch监听，当路由发生变化时执行

  方法一监听以及路由
  监听一级路由：路由组件的渲染区域为router-view，
  	作为顶层出口，它将匹配到的路由组件渲染在该区域中，
  	路由组件渲染默认的方式是销毁 - 创建，
  	因此$watch是监听不到一级路由的变化的。
  	所以，要想使用$router监听一级路由，需要让组件成为复用组件，
  	也就是使用keep-alive包裹router-view。
  	
	<keep-alive>
	     <router-view />
	</keep-alive>
	
  watch: {
    $route: {
        handler: function(to, from) {
            console.log(to，'新'，from, '旧');
             if(from && (from.name === 'adoptSelect')){
                this.active = 2
            }
        },
        // 深度观察监听
        deep: true,
        immediate: true
    }
}
方法二 监听子路由：
需要在有子路由的情况下，才能在当前组件监听到子组件的路由变化，直接使用下面的方式即可。
watch：{
	$route(to, from){
		console.log('去哪里',to,  '从哪里来',from)
		console.log(to.path)
	}
}
或者
 watch: {
  '$route.path': function (newVal, oldVal) {
   if (newVal === '/login') {
    console.log('欢迎进入登录页面');
   }
   if (newVal === '/register') {
    console.log('欢迎进入注册页面');
   }
  }
 }
方法三
watch: {
   '$route' : 'getPath' // 获取路径
},
methods: {
   getPath(){
     console.log( this .$route.path);
   }
}

key-用来阻止“复用”的

Vue 为我们提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可(Vue文档原话)

<router-view :key= "key" ></router-view> 
computed: { //计算属性
   key() {
     return  this .$route.name !== undefined 
     ?
     this .$route.name + new  Date() 
     :
     this .$route + new  Date()
   }
}
使用computed属性和Date()可以保证每一次的key都是不同的，
这样就可以如愿刷新数据了。

全局监听路由

(通过vue-router的钩子函数
beforeRouteEnter
/beforeRouteUpdate
/beforeRouteLeave)

一般会在router里面加跳转验证才会用到这个方法

方法一 监听路由导航守卫
watch:{
   $route(to,from){
     if (to.path ==  '/'  || to.path ==  '/Prisoner'  || to.path ==  '/Goods'  || to.path ==  '/Time'  || to.path ==  '/Mine' ){
       /**
        * $store来自Store对象
        * dispatch 向 actions 发起请求
        */
       this .$store.dispatch( 'showTabBar' );
     } else {
       this .$store.dispatch( 'hideTabBar' );
     }
   }
 },
 
 beforeRouteEnter (to, from, next) {
   // 在渲染该组件的对应路由被 confirm 前调用
   // 不！能！获取组件实例 `this`
   // 因为当钩子执行前，组件实例还没被创建
    if(from.name !== 'adoptDetail'){
          next({
              path:'/adopt'
          })
      }else{
          next()
      }
 },
 beforeRouteUpdate (to, from, next) {
   // 在当前路由改变，但是该组件被复用时调用
   // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
   // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
   // 可以访问组件实例 `this`
 },
 beforeRouteLeave (to, from, next) {
   // 导航离开该组件的对应路由时调用
   // 可以访问组件实例 `this`
 },
 
 方法二：
在app.vue的create中加入下面代码，然后进行判断
this.$router.beforeEach((to ,from,next) =>{
   console.log(to);
   next(); 
})
等等方法