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 侦听器
- 计算属性和侦听器侧重的应用场景不同：
- 计算属性侧重于 监听多个值 的变化，最终计算并 返回一个新值
- 侦听器侧重于监听 单个数据 的变化，最终 执行特定的业务处理 ，不需要有任何返回值
