• 技术文章 >web前端 >Vue.js

    浅析Vue组件中如何使用 防抖 和 节流

    青灯夜游青灯夜游2021-11-25 19:41:39转载100
    Vue组件中如何使用 防抖 和 节流?下面本篇文章通过示例带大家了解一下Vue组件中使用 防抖 和 节流 控制 观察者和事件处理程序的方法,希望对大家有所帮助!

    在监听频繁触发的事件时,一定要多加小心,比如 用户在输入框打字、窗口大小调整、滚动、Intersection Observer 事件。

    这些事件总是被频繁触发,可能 几秒一次。如果针对每次事件都发起 fetch 请求(或类似的行为),那显然是不明智的。

    我们需要做的就是减缓事件处理程序的执行速度。这种缓冲技术就是 防抖(debounce) 和 节流(throttle)

    在本文中,你会了解到如何在 Vue 组件中 使用 防抖 和 节流 控制 观察者(watchers) 和 事件处理程序。【相关推荐:《vue.js教程》】

    1. 观察者 防抖

    我们先从一个简单的组件开始,我们的任务是 将用户输入到 文本框中的文本 输出到控制台:

    <template>
      <input v-model="value" type="text" />
      <p>{{ value }}</p>
    </template>
    <script>
    export default {
      data() {
        return {
          value: "",
        };
      },
      watch: {
        value(newValue, oldValue) {
          console.log("Value changed: ", newValue);
        }
      }
    };
    </script>

    打开demo:

    https://codesandbox.io/s/vue-input-szgn1?file=/src/App.vue

    打开 demo,在 输入框 敲几个字符。每次输入时,值就会被 log 到控制台。

    我们通过使用 观察者(watcher) 监听 value 数据属性 来实现了打印日志。但如果你想在 观察者的回调 中加入一个 使用 value 作为参数 的 GET 请求,那你应该不会期望太过频繁地发起请求。

    我们来对 打印控制台日志 这个行为做一下 防抖。核心思想是创建一个 防抖函数,然后在 观察者 内部调用该函数。

    我在这里选择了 'lodash.debounce' 的 防抖实现,但你可以自由选择喜欢的实现方式。

    我们来将 防抖逻辑 应用到组件:

    <template>
      <input v-model="value" type="text" />
      <p>{{ value }}</p>
    </template>
    <script>
    import debounce from "lodash.debounce";
    export default {
      data() {
        return {
          value: "",
        };
      },
      watch: {
        value(...args) {
          this.debouncedWatch(...args);
        },
      },
      created() {
        this.debouncedWatch = debounce((newValue, oldValue) => {
          console.log('New value:', newValue);
        }, 500);
      },
      beforeUnmount() {
        this.debouncedWatch.cancel();
      },
    };
    </script>

    试试 demo

    https://codesandbox.io/s/vue-input-debounced-4vwex?file=/src/App.vue

    如果你打开这个 demo,你会发现其实从用户角度来看,变化不大:你依旧可以像上一个 demo 中一样自由输入字符。

    但有一个区别:只有在最后一次输入的 500ms 之后,才会将新的输入值打印日志到控制台。这说明 防抖 在生效。

    观察者 的 防抖实现 只需要 3 个简单步骤:

    采用同样的方式,你可以对任意数据属性的 观察者 应用 防抖。然后就可以安全执行 防抖回调内部的一些比较重的操作,比如 网络请求、繁重的 DOM 操作,等等。

    2. 事件处理器 防抖

    上面一节,我展示了如何对 观察者 使用 防抖,那么常规的事件处理器呢?

    我们重用之前用户输入数据到输入框的例子,但这一次会给输入框加个 事件处理器。

    像往常一样,如果你没有采取任何缓冲的措施,每当值被修改时,会被打印到控制台:

    <template>
      <input v-on:input="handler" type="text" />
    </template>
    <script>
    export default {
      methods: {
        handler(event) {
          console.log('New value:', event.target.value);
        }
      }
    };
    </script>

    试试 demo:

    https://codesandbox.io/s/vue-event-handler-plls4?file=/src/App.vue

    打开这个 demo,在输入框打几个字符。看看控制台:你会发现每次你输入的时候就会有日志被打印出来。

    同样,如果你会执行一些比较重的操作(比如网络请求),可就不合适了。

    对 事件处理器 使用 防抖,可以参考下面这个:

    <template>
      <input v-on:input="debouncedHandler" type="text" />
    </template>
    <script>
    import debounce from "lodash.debounce";
    export default {
      created() {
        this.debouncedHandler = debounce(event => {
          console.log('New value:', event.target.value);
        }, 500);
      },
      beforeUnmount() {
        this.debouncedHandler.cancel();
      }
    };
    </script>

    试试 demo:

    https://codesandbox.io/s/vue-event-handler-debounced-973vn?file=/src/App.vue

    打开 demo,输入一些字符。组件只有在最后一次输入的 500ms 之后,才会将新的输入值打印日志到控制台。防抖 再一次生效了!

    事件处理器 的 防抖实现 只需要 3 个步骤:

    另一方面,这些例子应用了 防抖 的技术。然而,同样的方式可以以用于创建 节流函数。

    3. 注意

    你可能不理解:为什么不直接在 组件的 method 选项中创建 防抖函数,然后在 template 中调用这些方法作为事件处理器?

    // ...
      methods: {
        // Why not?
        debouncedHandler: debounce(function () { ... }}, 500)
      }
    // ...

    这比在实例对象上创建 防抖函数 要简单的多。

    例如:

    <template>
      <input v-on:input="debouncedHandler" type="text" />
    </template>
    <script>
    import debounce from "lodash.debounce";
    export default {
      methods: {
        // Don't do this!
        debouncedHandler: debounce(function(event) {
          console.log('New value:', event.target.value);
        }, 500)
      }
    };
    </script>

    试试 demo

    https://codesandbox.io/s/vue-event-handler-debounced-incorrectly-320ci?file=/src/App.vue

    这次不是在 created() 钩子 里创建 防抖回调了,而是将 防抖回调 赋给了 methods.debouncedHandler

    你如果试过 demo,你会发现是有效果的!

    问题是,组件使用 export default { ... } 导出的 options 对象,包括方法,会被组件实例重用。

    如果网页中有 2 个以上的组件实例,那么所有的组件都会应用 相同 的防抖函数 methods.debouncedHandler — 这会导致防抖出现故障。

    4. 总结

    在 Vue 中,可以很轻松的对 观察者 和 事件处理器 应用 防抖 和 节流。

    核心逻辑就是,在 created() 钩子 里,创建 防抖 或 节流 的回调,并赋值在实例上。

    // ...
      created() {
        this.debouncedCallback = debounce((...args) => {
          // The debounced callback
        }, 500);
      },
    // ...

    A)然后在观察者内部调用实例上的防抖函数:

    // ...
      watch: {
        value(...args) {
          this.debouncedCallback(...args);
        },
      },
    // ...

    B)或在 template 中设定一个事件处理器:

    <template>
      <input v-on:input="debouncedHandler" type="text" />
    </template>

    在这之后,每次调用 this.debouncedCallback(...args) ,就算执行频率非常高,内部的回调也能缓冲执行。

    你对 Vue 中的 防抖 和 节流 还什么问题吗?欢迎提问!

    更多编程相关知识,请访问:编程入门!!

    以上就是浅析Vue组件中如何使用 防抖 和 节流的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:Vue组件 防抖 节流
    上一篇:深入了解Vuex中的State和Getter 下一篇:分享一个强大的 Vue 图片编辑插件(快来试试!)
    php中文网线上培训班

    相关文章推荐

    • 总结分享一些关于vue的前端基础面试题• 看看Vue中如何封装一个自动化注册全局组件• Vue+ElementUI怎么处理超大表单

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网