一、概述

本篇文章介绍了Vue.js 3.x的侦听器，包括：什么是侦听器？侦听器的基本使用；以及侦听器和计算属性的对比，及其各自适应的场景。

二、侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。（什么时候需要自定义侦听器呢？）这就是为什么Vue通过watch选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

示例代码：04-Watcher.html
如上图所示，数据项中有1个question数据，将其绑定到了input元素上，当在input元素上修改内容时，绑定的question数据项也会同步修改。而此时watch中检测的question函数就会被触发。也就是说，只要watch侦听的数据项发生了改变，就会触发对应的监听函数。完整的代码如下所示：

<html><head><title>Vue 3.x的侦听器</title><script src="https://unpkg.com/vue@next"></script><script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script></head><body><div id="container"><p>Ask a yes/no question:<input v-model="question" /></p><p>{{ answer }}</p></div></body><script>const HelloVueApp = {data() {return {question: "",answer: "I cannot give you an answer until you ask a question!",};},watch: {// 如果 `question` 发生改变，这个函数就会运行。question: function (newQuestion, oldQuestion) {this.answer = "Waiting for you to stop typing...";this.debouncedGetAnswer();},},created: function () {// `_.debounce` 是一个通过Lodash限制操作频率的函数。// 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率AJAX请求直到用户输入完毕才会发出。// 想要了解更多关于`_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，请参考：https://lodash.com/docs#debounce// 重点：当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。this.debouncedGetAnswer = _.debounce(this.getAnswer, 500);},methods: {getAnswer: function () {if (this.question.indexOf("?") === -1) {this.answer = "Questions usually contain a question mark. ;-)";return;}this.answer = "Thinking...";var vm = this;axios.get("https://yesno.wtf/api").then(function (response) {debugger;vm.answer = _.capitalize(response.data.answer); // 首字母大写。}).catch(function (error) {vm.answer = "Error! Could not reach the API. " + error;});},},};let vm = Vue.createApp(HelloVueApp).mount("#container");</script>
</html>

运行上述代码，打开的页面效果如下图所示：

在这个示例中，使用watch选项允许我们执行异步操作(访问一个API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
除了watch选项之外，您还可以使用命令式的vm.$watch API。
至此，我们做如下的总结：
1、为什么是执行异步操作的时候需要使用watch呢？而不是计算属性呢？因为计算属性需要的是立即返回结果值，而使用了异步则无法直接做到这点。
2、那为什么开销较大的操作推荐使用侦听器？而不是计算属性呢？同样也是和计算属性需要立即返回结果值有关。

三、计算属性vs侦听属性

Vue提供了更通用的方式来观察和响应Vue实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用watch，特别是如果你之前使用过AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的watch回调。细想一下这个例子：

示例代码：05-Watcher.html
上面代码是命令式且重复的。将它与计算属性的版本进行比较：

示例代码：06-Computed.html
和侦听属性的方式比较起来，此处的计算属性确实简便了很多。

四、参考资料

https://v3.vuejs.org/guide/computed.html
https://cn.vuejs.org/v2/guide/computed.html
书籍《Vue.js实战》第04章 v-bind及class与style绑定第02节绑定class的几种方式

光脚丫思考Vue3与实战：第05章计算属性和侦听器第02节侦听器相关推荐

光脚丫思考Vue3与实战：第04章模板语法第01节概述+插值
下面是本文的屏幕录像的在线视频: 光脚丫思考Vue3与实战:第04章模板语法第01节插值温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baid ...
光脚丫思考Vue3与实战：第05章计算属性和侦听器第01节计算属性
下面是本文的屏幕录像的在线视频: 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baidu.com/s/1MiGKmrzp40i1ZD_4borteQ ...
光脚丫思考Vue3与实战：第05章计算属性和侦听器第03节计算属性的其他玩法
下面是本文的屏幕录像的在线视频: 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baidu.com/s/1h600_BRR9O2Lr87zVQNgEw ...
光脚丫思考Vue3与实战：第04章模板语法第03节指令的修饰符
下面是本文的屏幕录像的在线视频: 第03节指令的修饰符温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baidu.com/s/1J08bPvs6OI ...
光脚丫思考Vue3与实战：第02章安装Vue.js
下面是本文的屏幕录像的在线视频: 02-安装Vue.js 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本:https://pan.baidu.com/s/16594YUpNNrkjZf ...
光脚丫思考Vue3与实战：第03章 Vue实例
下面是本文的屏幕录像的在线视频: 03-Vue实例 04-生命周期示意图+钩子函数温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 03-Vue实例:https://pan.baid ...
光脚丫思考Vue3与实战：第01章初步认识Vue3
下面是本文的屏幕录像的在线视频: 01-初步认识Vue.js-PART1 01-初步认识Vue.js-PART2 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: PART1:http ...
光脚丫思考Vue3与实战：第04章模板语法第04节指令的缩写
下面是本文的屏幕录像的在线视频: 第04节指令的缩写温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baidu.com/s/1Dd2HeUXH6DZ ...
光脚丫思考Vue3与实战：第04章模板语法第02节指令的参数+动态参数
下面是本文的屏幕录像的在线视频: 第02节指令的参数+动态参数温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baidu.com/s/11_hwQF ...

光脚丫思考Vue3与实战：第05章计算属性和侦听器第02节侦听器

一、概述

二、侦听器

三、计算属性vs侦听属性

四、参考资料

光脚丫思考Vue3与实战：第05章计算属性和侦听器第02节侦听器相关推荐

最新文章

热门文章

光脚丫思考Vue3与实战：第05章 计算属性和侦听器 第02节 侦听器

一、概述

二、侦听器

三、计算属性vs侦听属性

四、参考资料

光脚丫思考Vue3与实战：第05章 计算属性和侦听器 第02节 侦听器相关推荐

最新文章

热门文章

光脚丫思考Vue3与实战：第05章计算属性和侦听器第02节侦听器

光脚丫思考Vue3与实战：第05章计算属性和侦听器第02节侦听器相关推荐