Vue3进阶：监听属性的介绍、使用详解和代码实战案例

本文链接：https://blog.csdn.net/zhouruifu2015/article/details/134820658

watch代码示例3：异步加载中使用watch

总结

更多关于Vue前端相关技术点，敬请关注公众号：CTO Plus后续的文章，有问题欢迎后台留言交流。

注意：由于排版太费时间，所以还是多多注重技术干货的内容吧。

接下来的一段时间我将除了总结下关于【Python进阶系列】的知识点分享文章外，还将为各位前端读者（全栈开发者）分享下关于前端开发框架Vue3的内容，当然还会包括：H5、CSS3、JavaScript、JQuery、前端开发规范等前端内容。

然后对Python开发感兴趣的读者也可以关注公众号CTO Plus，关注【Python进阶系列】的内容，同时涉及到Web开发、爬虫开发、操作系统开发、网络安全开发应用领域这块，可以分别参考我的公众号CTO Plus【Flask进阶系列】、【Django进阶系列】、【DRF进阶系列】、【互联网分布式爬虫系列】和【网络安全系列】的内容，敬请关注，欢迎交流。

以下是【Vue3进阶系列】300多篇的部分内容

Vue3中的监听属性是一种非常有用的功能，它允许我们在数据发生变化时执行特定的操作。通过监听属性，我们可以监听指定的数据，并在数据发生变化时触发回调函数或执行其他操作。

Vue3中的监听属性有两种实现方式：`watch`和`watchEffect`。

在前面的几篇文章中，我分别总结介绍了Vue的组件、父子组件之间的通信以及计算属性computed的详细使用，具体可以参考前面几篇文章的介绍：

Vue3进阶：简化前端开发的利器，以及常用指令汇总和案例详解

Vue3进阶：常用的指令缩写详解，以及代码使用示例

Vue3进阶：循环语句的介绍和编码使用详解（附代码与群资料）

Vue3进阶：条件语句控制内容展示的介绍和编码使用详解（附代码与群资料）

Vue3进阶：模板语法的介绍和编码使用详解（附代码与群资料）

Vue3进阶：Vue与Web components的初步介绍和转换

Vue3进阶：组件开发指南之构建可复用的UI组件详解和代码示例

Vue3进阶：组件开发指南之使用 Props 传递和管理组件之间的数据

那么本篇文章，我将为大家介绍再介绍一个Vue3的重点特性：监听属性 watch，我们可以通过 watch 来响应数据的变化。

watch的作用

watch 的作用是用于监测响应式属性的变化，并在属性发生改变时执行特定的操作，它是 Vue 中的一种响应式机制，允许你在数据发生变化时做出相应的响应，执行自定义的逻辑。

有了watch，这种使得Vue在响应式属性变化时能够有更多的控制权和灵活性，让你的组件能够更好地响应数据的变化并执行相应的逻辑。

使用watch的注意事项

在使用监听属性时，我们需要注意以下几点：

避免监听过深的数据：监听属性应该尽量避免监听过深层次的数据。如果需要监听深层次的数据，可以考虑使用计算属性或`watch`选项来替代。
异步操作的处理：如果在回调函数中执行了异步操作，需要注意避免重复执行。可以利用`watch`函数提供的选项来进行节流或防抖处理。
移除监听：当不再需要监听属性时，应确保将其移除，防止不必要的性能损耗。

watch代码示例1：计数器

以下实例通过使用 watch 实现计数器：

<p>author:<b>SteveRocket</b></p><p>WeChat:<a href="https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q">https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q</a></p>
结果：{{counter}}<button @click="counter++">计算</button><script>    const VueApp = {        data() {            return {                counter: 1            }        }    }
    VueObj = Vue.createApp(VueApp).mount("body")    VueObj.$watch('counter', function (value1, value2) {        console.log("原始值：" + value2 + "新值：" + value1)    })</script>

输出结果

watch代码示例2：单位换算

以下实例进行千米与米之间的换算：

<p>author:<b>SteveRocket</b></p><p>WeChat:<a href="https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q">https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q</a></p>
KM:<input type="text" v-model="kilometers" @focus="currentlyActiveField='kilometers'">M:<input type="text" v-model="meters" @focus="currentlyActiveField='meters'"><p id="info"></p><script>    const VueApp = {        data() {            return {                kilometers: 0,                meters: 0            }        },        watch: {            kilometers: function (value1, value2) {                //  判断是否是当前输入框                if (this.currentlyActiveField === 'kilometers') {                    this.kilometers = value1                    this.meters = value1 * 1000                }            },            meters: function (value1, value2) {                //  判断是否是当前输入框                if (this.currentlyActiveField === 'meters') {                    this.kilometers = value1 / 1000                    this.meters = value1                }            }        }    }    vueObj = Vue.createApp(VueApp).mount('body')    vueObj.$watch('kilometers', function (value1, value2) {        // 这个回调将在 vueObj.kilometers 改变后调用        document.getElementById("info").innerHTML = "当前值为：" + value2 + "  修改后的值为：" + value1    })</script>

以上代码中我们创建了两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。watch 对象创建了 data 对象的两个监控方法： kilometers 和 meters。

输出结果

当我们在输入框输入数据时，watch 会实时监听数据变化并改变自身的值。

watch代码示例3：异步加载中使用watch

异步数据的加载 Vue 通过watch 选项提供了一个更通用的方法，来响应数据的变化。下面实例我们使用了 axios 库，公众号CTO Plus后面的文章会具体介绍。

<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 --><!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 --><script src="https://cdn.staticfile.org/axios/0.27.2/axios.min.js"></script><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><p>输入一个问题，以？号结尾输出答案：<input v-model="question"/></p><p>{{ answer }}</p>
<script>    const watchVueApp = Vue.createApp({        data() {            return {                question: "",                answer: "每个问题结尾需要输入？号"            }        },        watch: {            //每当问题改变时，此功能将运行，以 ? 号结尾，兼容中英文 ?            question(newValue1, oldValue2) {                if (newValue1.indexOf('?') > -1 || newValue1.indexOf('？') > -1) {                    this.getAnswer()                }            }        },        methods: {            getAnswer() {                this.answer = '加载中.....'                axios.get('https://www.runoob.com/try/ajax/json_vuetest.php').then(response => {                    this.answer = response.data.answer                }).catch(error => {                    this.answer = '错误！无法访问API。' + error                })            }        }    })    watchVueApp.mount('body')</script>

参考阅读：

《Vue3进阶：常用的指令缩写详解，以及代码使用示例》

《Vue3进阶：简化前端开发的利器，以及常用指令汇总详解》

总结

Vue3中的监听属性是一个非常强大和灵活的功能，它允许我们在数据发生变化时执行特定的操作。通过`watch`和`watchEffect`函数，我们可以监听指定的数据，并在数据发生变化时触发回调函数或执行其他操作。使用监听属性时需要注意避免监听过深的数据，处理异步操作和及时移除监听。掌握Vue3中监听属性的使用方法，将有助于构建更加灵活和响应式的应用程序。

大前端专栏

https://blog.csdn.net/zhouruifu2015/category_5734911.html

更多精彩，关注我公号，一起学习、成长