在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 中可以做的事情很多就不一一举例了。