『VUE』15. 侦听器（详细图文注释）

---

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中

侦听器介绍

Vue 的侦听器（Watcher）机制是 Vue.js 提供的一种响应式数据监听方式，用于监听数据的变化并执行相应的操作。当数据发生变化时，侦听器会自动执行指定的函数或逻辑。

在 Vue 组件中，我们可以通过 watch 选项来定义侦听器。侦听器可以监听单个属性的变化，也可以监听多个属性的变化。当被监听的数据发生变化时，侦听器会自动被调用。

---

使用方法

message是你要监控的数据变量,我们这里是当message变化时候,con.log变化后的数据和变化前的数据u.

  watch: {
    message(newValue, oldValue) {
      console.log(newValue, oldValue);
    },
  },

---

代码

watchDemo.vue

<template>
  <h3>watch侦听器</h3>
  <div>{{ message }}</div>
  <button @click="changeData">修改数据</button>
</template>

<script>
export default {
  data() {
    return {
      message: "qwer",
    };
  },
  methods: {
    changeData() {
      this.message = this.message.split("").reverse().join(""); //逆序字符串
      console.log(this.message);
    },
  },
  watch: {
    message(newValue, oldValue) {
      console.log(newValue, oldValue);
    },
  },
};
</script>

---

总结

大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！

版权声明：

发现你走远了@mzh原创作品，转载必须标注原文链接

Copyright 2024 mzh

Crated：2024-3-1

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中
『未完待续』

---