zoukankan      html  css  js  c++  java
  • Vue中防抖和节流 --来自官方文档

    Vue 没有内置支持防抖和节流,但可以使用 Lodash 等库来实现。

    如果某个组件仅使用一次,可以在 methods 中直接应用防抖:

    <script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>
    <script>
      Vue.createApp({
        methods: {
          // 用 Lodash 的防抖函数
          click: _.debounce(function() {
            // ... 响应点击 ...
          }, 500)
        }
      }).mount('#app')
    </script>
    

    但是,这种方法对于可复用组件有潜在的问题,因为它们都共享相同的防抖函数。为了使组件实例彼此独立,可以在生命周期钩子的 created 里添加该防抖函数:

    app.component('save-button', {
      created() {
        // 用 Lodash 的防抖函数
        this.debouncedClick = _.debounce(this.click, 500)
      },
      unmounted() {
        // 移除组件时,取消定时器
        this.debouncedClick.cancel()
      },
      methods: {
        click() {
          // ... 响应点击 ...
        }
      },
      template: `
        <button @click="debouncedClick">
          Save
        </button>
      `
    })
    
    无个性不签名
  • 相关阅读:
    javascript 介绍
    命令提示符(命令行)
    node(1) hello world
    用Vgg16来提取特征
    VGG16学习
    注意力模型
    统计学习方法
    数字图像处理(五)
    数字图像处理(四)
    BN
  • 原文地址:https://www.cnblogs.com/qinweijie/p/14016615.html
Copyright © 2011-2022 走看看