vue2 vue3 侦听器watch

1.什么是watch的侦听器

watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。例如：监视用户名的变化并发起请求，判断用户名是否可用

2.watch的基本语法

在watch节点下，定义自己的侦听器

• 监听谁的变化，就把谁作为方法名

<template>
  <div>
    <h3>watch监听器的基本使用</h3>
    <input type="text" v-model.trim="username" />
  </div>
</template>

<script>
export default {
  name: "MyWatch",
  data() {
    return {
      username: "",
    };
  },
  watch: {
    // 监听谁的变化，就把谁作为方法名
    username(newVal, oldVal) {
      console.log(newVal, oldVal);
    },
  },
};
</script>

<style lang="less" scoped>
</style>

3.应用场景

3.1 使用watch检测用户名是否可用

监听username的变化，并使用axios发起Ajax请求，检测当前输入的用户名是否可用

<template>
  <div>
    <h3>watch监听器的基本使用</h3>
    <input type="text" v-model.trim="username" />
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "MyWatch",
  data() {
    return {
      username: "",
    };
  },
  watch: {
    // 监听谁的变化，就把谁作为方法名
    async username(newVal, oldVal) {
      const { data: res } = await axios.get(
        "https://www.escook.cn/api/finduser/" + newVal
      );
      console.log(res);
    },
  },
};
</script>

<style lang="less" scoped>
</style>

4.immediate选项

默认情况下，组件在初次加载完毕后不会调用watch侦听器。如果想让watch侦听器立即被调用，则需要使用immediate选项。

• 将侦听器变为一个对象
• handler:是处理函数
• immediate:是否立即被调用，默认为false

<template>
  <div>
    <h3>watch监听器的基本使用</h3>
    <input type="text" v-model.trim="username" />
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "MyWatch",
  data() {
    return {
      username: "admin",
    };
  },
  watch: {
    // 监听谁的变化，就把谁作为方法名
    username: {
      async handler(newVal, oldVal) {
        const { data: res } = await axios.get(
          "https://www.escook.cn/api/finduser/" + newVal
        );
        console.log(res);
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
</style>

5.deep选项

当watch如果监听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用deep选项

例如：如果想要监听info.username的值是否发生变化，如果发生变化了，则做一些操作：

• 使用deep属性，设置为true
• 只要info的任何一个属性发生了变化，都会触发这个侦听器

<template>
  <div>
    <h3>watch监听器的基本使用</h3>
    <input type="text" v-model.trim="info.username" />
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "MyWatch",
  data() {
    return {
      username: "admin",
      info: {
        username: "zs",
      },
    };
  },
  watch: {
    // 监听谁的变化，就把谁作为方法名,或者是键名
    info: {
      async handler(newVal, oldVal) {
        const { data: res } = await axios.get(
          "https://www.escook.cn/api/finduser/" + newVal
        );
        console.log(res);
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang="less" scoped>
</style>

6.监听对象单个属性的变化

如果只想监听对象中单个属性的变化，则可以按照如下的方式：

但是其实可以改写下面这种，也可以监听到对象的某个属性的变化

"对象.属性名":{
    hander(newVal,oldVal){
        
    }
}

示例代码如下：

 watch: {
    "info.username": {
      async handler(newVal, oldVal) {
        const { data: res } = await axios.get(
          "https://www.escook.cn/api/finduser/" + newVal
        );
        console.log(res);
      },
    },
  },

7.计算属性VS侦听器

计算属性和侦听器应用场景不同

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

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

总结

侦听器watch.png