文章目录
1 watch 侦听器
watch 侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作。
例如,监视用户名的变化并发起请求,判断用户名是否可用。
2 watch 侦听器的基本语法
开发者需要在 watch 节点下,定义自己的侦听器。
<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 使用 watch 检测用户名是否可用
监听 username 值的变化,并使用 axios 发起 Ajax 请求,检测当前输入的用户名是否可用。
安装axios出现报错:
代码
<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 选项
默认情况下,组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用,则需要使用 immediate 选项。
<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 选项
当 watch 侦听的是一个对象,如果对象中的属性值发生了变化,则无法被监听到。对象的指向没有改变。要监听对象中属性的变化,此时需要使用 deep 选项。
未加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>
加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 监听对象单个属性的变化
如果只想监听对象中单个属性的变化:
<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 计算属性 vs 侦听器
- 计算属性和侦听器侧重的应用场景不同:
- 计算属性侧重于 监听多个值 的变化,最终计算并 返回一个新值
- 侦听器侧重于监听 单个数据 的变化,最终 执行特定的业务处理 ,不需要有任何返回值