Vue3学习总结-Watch属性，让状态监听更高效！

🌟 Vue3进阶技巧：Watch属性，让状态监听更高效！🌟

Hey小伙伴们，Vue3的Watch属性就像是一位忠诚的哨兵，时刻监视着数据的变化。今天，我们就来聊聊Watch属性的那些妙用，看看它是如何在数据监听中发挥关键作用的！👀

---

📊 Watch属性：状态监听的守护者

在Vue3中，Watch属性专门用来监听数据的变化，一旦监测到指定数据发生变动，就会触发相应的回调函数。这使得我们可以对数据变化做出即时反应，比如更新UI、发起网络请求等，非常实用！🚨

---

📈 案例解析：实时搜索关键词高亮

想象一下，你正在开发一个搜索功能，用户在输入框中输入关键词时，页面上相关的文字需要被高亮显示。这时，Watch属性就大显身手了！

✒️代码示例：

<template>
  <div>
    <input v-model="searchTerm" placeholder="Search...">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        <span v-html="highlightedText(item.text)"></span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchTerm: '',
      items: [
        { id: 1, text: 'Vue.js' },
        { id: 2, text: 'React.js' },
        { id: 3, text: 'Angular.js' }
      ]
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.text.includes(this.searchTerm));
    }
  },
  watch: {
    searchTerm(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.updateHighlightedText();
      }
    }
  },
  methods: {
    updateHighlightedText() {
      // 更新高亮显示的文本
    },
    highlightedText(text) {
      const regex = new RegExp(`(${this.searchTerm})`, 'gi');
      return text.replace(regex, '<span class="highlight">$1</span>');
    }
  }
};
</script>

🎯解析时刻：

在这个例子中，searchTerm是一个被Watch属性监听的数据。每当searchTerm发生变化时，watch中的回调函数就会被触发，执行updateHighlightedText方法，重新计算高亮显示的文本。这样，用户在输入框中每输入一个字符，页面上的高亮效果就能实时更新，用户体验满分！

---

🎉实战演练：Watch属性的进阶用法

Watch属性不仅可以监听单个数据，还可以监听整个对象或数组的变化。下面的例子展示了如何监听一个对象属性的变化。

<template>
  <div>
    <p>User name: {{ user.name }}</p>
    <input v-model="user.name" placeholder="Change your name...">
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'John Doe'
      }
    };
  },
  watch: {
    'user.name': {
      handler(newVal, oldVal) {
        console.log('Name changed:', newVal, oldVal);
      },
      deep: true
    }
  }
};
</script>

在这个进阶案例中，我们监听了user.name的变化，每当name属性改变时，handler函数会被调用，打印出新旧值。注意这里设置了deep: true，以便深入监听对象内部属性的变化。

---

📚总结：Watch属性的魔法

学会了Watch属性，你就掌握了Vue3中状态监听的秘籍。它不仅能让代码对数据变化做出即时反应，还能提高应用的互动性和用户体验。下次在编写Vue应用时，记得用Watch属性，让你的状态监听更加高效！总之，watch可以监听4中数据类型。
包括ref，reactive数据，函数返回值，一个包含上述内容的数组。

• 监视ref的对象类型的数据时，是监视对象的地址，若想监视对象内部属性变化，需要手动设置。
• 监视reactive， 定义的数据类型，默认开启深度监视；
• 监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也可以写成函数，建议写成函数
• 监视多个数据，使用数组，里面使用函数

---

🏷️ #Vue3实战 #Watch属性 #实时搜索 #数据监听

---

✨ Keep coding, stay curious! ✨

---

如果你喜欢我的文章，请点赞，收藏，关注我，我会带来更多有趣、有用的编程知识和经验分享！🚀

---

🏷️ #编程学习 #前端开发 #Vue3技巧