vue watch 监听

在watch中我们可以监听很多东西，例如：数据，路由，表单值.....

//这是一段监听路由的代码段
watch:{
   '$route':{
    immediate:true,
    handler(to,from){ // 在函数中可以写自己的判断 to是要去的路由，from来时的路由
       if(to.path==='/index'){ //  是否跳转到index页面
              //执行代码块
       }   
   }
},

//配合计算属性监听vuex状态
computed: {  // 配合mapGetters监听
    ...mapGetters(["labelAllData"])
},
watch: {
    labelAllData(arr) {
        //要执行的代码
    }
},
//直接获取状态值来监听
computed: {
    listData() {
        return this.$store.state.applicationId.id;
    }
},
//监听执行
watch: {
    listData(val) {
        //要执行的代码
    }
},

//监听input 表单value
<template>
      <input class="search-input" v-model="queryData" type="text"/>
</template>
<script>
export default {
      data(){
            return {
                  queryData:''
            }
      }，
      watch: {
            queryData(val) {
                  //val 就是监听到的动态输入值可以在此函数中做自己的操作
            }
      }
}
</script>

以上都是一些简单易学的操作，watch 中可以做的事情很多就不一一举例了。