Article directory
1 watch listener
The watch listener allows developers to monitor data changes and perform specific operations on data changes.
For example, monitor username changes and initiate a request to determine if the username is available.
2 Basic syntax of watch listener
Developers need to define their own listeners under the watch node.
<template>
<div>
<h1>App 组件</h1>
<input type="text" v-model="content">
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
content: ''
}
},
watch: {
// 监听 content 的变化
// 第一个参数为变化后的值，第二个参数为变化前的值
content( newVal, oldVal ) {
console.log( 'newVal:'+newVal+' -- oldVal:'+oldVal )
}
}
}
</script>
<style>
</style>
3 Use watch to detect if the username is available
Monitor the change of the username value, and use axios to initiate an Ajax request to detect whether the currently entered username is available.
An error occurred when installing axios:
code
<template>
<div>
<h1>App 组件</h1>
<input type="text" v-model="username">
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'App',
data() {
return {
username: ''
}
},
watch: {
// 监听 content 的变化
// 第一个参数为变化后的值，第二个参数为变化前的值
async username( newVal, oldVal ) {
console.log( 'newVal:'+newVal+' -- oldVal:'+oldVal )
const {
data: res } = await axios.get( 'https://www.escook.cn/api/finduser/'+newVal )
console.log( res )
}
}
}
</script>
<style>
</style>
4 immediate options
By default, components don't call watch listeners after initial load. If you want the watch listener to be called immediately, you need to use the immediate option.
<template>
<div>
<h1>App 组件</h1>
<input type="text" v-model="username">
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'App',
data() {
return {
username: '1111'
}
},
watch: {
// 监听 username 的变化
username: {
// handler 属性是固定写法，当 username 变化时候会调用 handler
handler( newVal, oldVal ) {
console.log( newVal, oldVal )
},
// 组件加载完成立即调用一次
immediate: true
}
}
}
</script>
<style>
</style>
5 deep options
When the watch listens to an object, if the property value in the object changes, it cannot be monitored. The pointing of the object has not changed. To listen for changes to properties in an object, you need to use the deep option.
without deep
<template>
<div>
<h1>App 组件</h1>
<input type="text" v-model="info.name">
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'App',
data() {
return {
info: {
name: 'zs',
age: 14
}
}
},
watch: {
info: {
handler(newVal, oldVal) {
console.log(newVal, oldVal)
},
immediate: true
}
}
}
</script>
<style>
</style>
add deep
<template>
<div>
<h1>App 组件</h1>
<input type="text" v-model="info.name">
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'App',
data() {
return {
info: {
name: 'zs',
age: 14
}
}
},
watch: {
info: {
handler(newVal, oldVal) {
console.log(newVal, oldVal)
},
immediate: true,
deep: true
}
}
}
</script>
<style>
</style>
6 Monitor the change of a single property of an object
If you only want to listen for changes to a single property in the object:
<template>
<div>
<h1>App 组件</h1>
<input type="text" v-model="info.name">
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'App',
data() {
return {
info: {
name: 'zs',
age: 14
}
}
},
watch: {
// 必须使用字符串
'info.name': {
handler(newVal, oldVal) {
console.log(newVal, oldVal)
},
immediate: true
}
}
}
</script>
<style>
</style>
7 Computed properties vs listeners
- Computed properties and listeners focus on different scenarios:
- Computed properties focus on listening for changes in multiple values, and finally computing and returning a new value
- The listener focuses on monitoring the changes of a single data, and finally performs specific business processing without any return value