- 用法一:直接监听某个属性
<div id="app">
<input type="text" v-model="name" />
{{name}}
</div>
new Vue({
el: '#app',
data: {
name: ''
},
watch: {
name(newVal, oldVal) {
console.log('newVal:', newVal, '========', 'oldVal:', oldVal)
}
}
})
- 效果
- 用法二: 监听某个方法
<div id="app">
<input type="text" v-model="name" />
{{name}}
</div>
new Vue({
el: '#app',
data: {
name: ''
},
watch: {
name: 'changeName'
},
methods: {
changeName () {
console.log(this.name)
}
}
})
- 效果
- 用法三:有时我们需要页面一加载就执行监听函数可以使用下面的方法
<div id="app">
<input type="text" v-model="name" />
{{name}}
</div>
new Vue({
el: '#app',
data: {
name: 'aaa'
},
watch: {
name: {
handler (newVal, oldVal) { // 此处handler必须写,这就是我们所监听触发的事件
console.log(newVal, oldVal)
},
immediate: true // 这个设置就表示在页面一加载就执行该函数
}
},
methods: {
changeName () {
console.log(this.name)
}
}
})
-
用法四: watch监听默认只监听第一层,也就是说如果我们要监听一个对象或者数组中的值的变化,并不会触发监听事件
-
这时我们就需要使用deep: true属性来告诉watch我们需要进行深度监听,这时就可以监听对象和数组中的值的变化了
-
没有使用deep: true
<div id="app">
<input type="text" v-model="fruits.name" />
{{fruits}}
</div>
new Vue({
el: '#app',
data: {
fruits: {
name: 'apple',
color: 'red'
}
},
watch: {
fruits: {
handler (newVal, oldVal) {
console.log(newVal, oldVal)
}
}
},
methods: {
changeName () {
console.log(this.name)
}
}
})
-
效果
-
可以看到没有使用deep: true时控制台并没有打印东西,这说明watch监听并没有被触发
-
使用deep: true属性
<div id="app">
<input type="text" v-model="fruits.name" />
{{fruits}}
</div>
new Vue({
el: '#app',
data: {
fruits: {
name: 'apple',
color: 'red'
}
},
watch: {
fruits: {
handler (newVal, oldVal) {
console.log(newVal, oldVal)
},
deep: true
}
},
methods: {
changeName () {
console.log(this.name)
}
}
})
- 效果
- 可以看到使用了deep: true之后,控制台有输出