vue的watch监听
目录
- 一、watch的直接监听
-
- 1、简单变量的监听
- 2、对象中变量的监听
- 3、监听值为处理函数
- 二、watch的handler函数监听
-
- 1、简单变量的监听（handler函数监听）
- 2、对象中变量的监听（handler函数+deep属性监听）
- 3、变量的初始化监听（handler函数+immediate）
- 三、补充
vue提供了侦听属性watch，可以很好的观察和侦听vue实例响应数据的变化。本文对其用法进行了归整
一、watch的直接监听
1、简单变量的监听
<input type="text" v-model="inputValue"> 输入框的值为：{{watchInputValue}}
export default {
data(){
return {
inputValue: '',
watchInputValue: ''
}
},
watch: {
inputValue(newName, oldName){
this.watchInputValue = newName
}
}
}
结果显示如下：
2、对象中变量的监听
<input type="text" v-model="inputValue">
输入框的值为：{{watchInputValue}}
export default {
data(){
return {
info: {
name: ''
},
}
},
watch: {
'info.name'(newName, oldName){
console.log(newName);
}
}
}
结果显示如下：
3、监听值为处理函数
<input type="text" v-model="inputValue">
输入框的值为：{{watchInputValue}}
export default {
data(){
return {
inputValue: '',
watchInputValue: ''
}
},
watch: {
inputValue: 'watchInputNameFunc' // 也可以写成: 'inputValue': 'watchInputNameFunc'
},
methods: {
watchInputNameFunc(newName, oldName){
console.log(newName) // this.inputValue的值
this.watchInputValue = this.inputValue // 也可以写成：this.watchInputValue = newName
},
}
}
结果显示如下：
二、watch的handler函数监听
1、简单变量的监听（handler函数监听）
<input type="text" v-model="inputValue">
输入框的值为：{{watchInputValue}}
export default {
data(){
return {
inputValue: '',
watchInputValue: ''
}
},
watch: {
inputValue：{
handler(newName, oldName){
this.watchInputValue = newName
}
}
}
}
结果显示如下：
2、对象中变量的监听（handler函数+deep属性监听）
info对象中name的值：<input type="text" v-model="info.name" style="margin: 20px">
export default {
data(){
return {
info: {
name: ''
},
}
},
watch: {
info：{
handler(newName, oldName){
console.log('info对象中name属性值为：' + this.info.name)
},
deep: true
}
}
}
结果显示如下：
3、变量的初始化监听（handler函数+immediate）
<input type="text" v-model="inputValue">
输入框的值为：{{watchInputValue}}
export default {
data(){
return {
inputValue: '11111',
watchInputValue: ''
}
},
watch: {
inputValue：{
handler(newName, oldName){
this.watchInputValue = newName
},
immediate: true
}
}
}
结果显示如下：
三、补充
1、如果不适用immediate：true，那么变量在响应式系统中的第一次初始化值是监听不到的
<input type="text" v-model="inputValue">
输入框的值为：{{watchInputValue}}
export default {
data(){
return {
inputValue: '11111',
watchInputValue: ''
}
},
watch: {
inputValue：{
handler(newName, oldName){
this.watchInputValue = newName
}
}
}
}
结果显示如下：
2、当对象的属性过多时，使用deep属性直接对对象进行深度监听，会给所有的属性加上监听器。
如果你只是想对对象中的其中一个属性进行监听，那么可以直接使用字符串形式的监听，即：
export default {
watch(){
'对象.属性'(newValue, oldValue){
consle.log(newValue, oldValue)
}
}
}