vue中watch用法
说起watch大家应该都比较熟悉,watch的用法就是监听变量的变化然后触发事件。其实在实际的使用中watch是用的比较少的,因为我们程序的的机制一般都是进行某些操作后主动触发的,如果你的watch事件过多那么一定是你的程序设计有问题。废话不多说,这里主要介绍watch使用。
# 基础用法
data(){
return {
inputValue: ''
}
}
watch: {
inputValue(){
// dosomething
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 使用handler属性
watch: {
inputValue: {
handler: //可以是一个函数,也可以是methods中定义的方法
}
}
1
2
3
4
5
2
3
4
5
# 深度监听deep
methods: {
handlerM(){ }
},
watch: {
inputValue: {
handler: 'handlerM'
deep: //true或false,一般对象无法监听属性变化,使用deep就可以监听内部 //属性变化,但无法确认具体是哪个属性变化,返回结果任是整个对象
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 初值触发
watch: {
inputValue: {
immediate: //true或false
//开启会在变量初始化的时候触发事件,也就是说监听会在初始化阶段之前执行,在此情况下,watch会先于created执行
}
}
1
2
3
4
5
6
2
3
4
5
6
上次更新: 2025/09/05, 8:09:00