Vue----watch 侦听器

文章目录

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 侦听器

计算属性和侦听器侧重的应用场景不同：

计算属性侧重于 监听多个值 的变化，最终计算并 返回一个新值

侦听器侧重于监听 单个数据 的变化，最终 执行特定的业务处理 ，不需要有任何返回值