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

下面是本文的屏幕录像的在线视频：温馨提示：1、视频下载：线上视频被压缩处理，可以下载高清版本：链接：https://pan.baidu.com/s/1MiGKmrzp40i1ZD_4borteQ提取码：wc592、示例代码：https://pan.baidu.com/s/1rCqbY_j35FcRWRZbuOfHqg提取码：79kh下图是文章大纲：一、概述模板内的表达式非常便利，但是设计它们的初衷

光脚丫思考

21181人浏览 · 2021-05-27 21:12:47

光脚丫思考 · 2021-05-27 21:12:47 发布

下面是本文的屏幕录像的在线视频：

温馨提示：

1、视频下载：线上视频被压缩处理，可以下载高清版本：

链接：https://pan.baidu.com/s/1qUekWio3fpWToT9PiECpEg 提取码：v962

2、示例代码：https://pan.baidu.com/s/1rCqbY_j35FcRWRZbuOfHqg 提取码：79kh

下图是文章大纲：

一、概述

本篇文章介绍了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的几种方式

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^