首页 > 其他分享 >#yyds干货盘点#vue的防抖

#yyds干货盘点#vue的防抖

时间:2022-10-27 22:37:03浏览次数:85  
标签:yyds 防抖 vue debouncedWatch debounce 观察者 value 输入框

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

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

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

观察者 防抖

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

<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>

我们通过使用 观察者(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>

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

  1. 在​​create()​​ 钩子 里,创建 防抖回调,并将其赋值到实例上:​​this.debouncedWatch = debounce(..., 500)​​。
  2. 在 观察者 回调​​watch.value() { ... }​​ 中 传入正确的参数 调用​​this.debouncedWatch()​​。
  3. 最后,​​beforeUnmount()​​ 钩子中 调用​​this.debouncedWatch.cancel()​​ ,在卸载组件之前,取消所有还在 pending 的 防抖函数执行。

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

事件处理器 防抖

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

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

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

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

​试试 demo​

打开这个 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>

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

  1. . 在​​create()​​ 钩子 里,创建实例后,立刻将 防抖回调​​debounce(event => {...}, 500)​​ 赋值到​​this.debouncedHandler​​ 。
  2. 在输入框的 template 中 给​​v-on:input​​ 赋上​​debouncedHandler​​ :​​<input v-on:input="debouncedHandler" type="text" />​
  3. 最后,在卸载组件之前, 在​​beforeUnmount()​​ 钩子中 调用​​this.debouncedHandler.cancel()​​ ,取消所有还在 pending 的 函数调用。

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

标签:yyds,防抖,vue,debouncedWatch,debounce,观察者,value,输入框
From: https://blog.51cto.com/u_11365839/5801968

相关文章

  • new: 轮播图 | MDN上HTML的总结和CSS面试题解答,以及vue-admin/豆瓣一个静态页面的实现
    主要参看oppo官网https://www.oppo.com/cn/,实现以下功能一、轮播图https://www.cnblogs.com/WindrunnerMax/p/12638005.html通常是在首页读秒播放的图片,本次了解的是opp......
  • vue项目总结
    项目总结在进行网站数据请求的过程中,面临接口实时刷新的情况,数据请求过期解决:将最新请求出来的数据本地存储便于页面渲染再用到项目中所需要的组件有问题时,学会查看......
  • vue-element-admin框架学习笔记
    0背景vue-element-admin是一个已高度完成的系统原型,它基于vue框架和elementUI组件库。它使用最新的前端技术栈,内置i18n国际化解决方案、动态路由、权限验证。它可以帮助......
  • Vue学习笔记之使用computed计算属性
    0x00概述本文主要记录Vue页面使用computed计算属性0x01computed基本使用在computed中定义一个函数(看起来是一个函数,其实是一个属性),命名按照属性规范命名(一般为名词)......
  • Vue学习笔记之scope.row的最简单理解
    0x00概述本文转载,仅做记录用,原文 0x01表格内开关选项如果表单中只是对返回数据的字面量的显示,prop和slot-scope没有大的差异,开发过程中基本可以通用;但是如果有一个......
  • vue中v-for写在template上,加key提示错误
    v-for写在非template上,添加:key没有任何问题,但是写在template上就不行了,加了就报错虽然不影响页面渲染,但终端一直报错显示,很讨厌;有时候,页面渲染,还是需要不加div层的基础......
  • vue2 使用video.js
    页面内使用//外层div<divclass="video-class"v-if="isShowVideoDialog"><!--<videowidth="100%"height="100%"controls:src="playUrl"></video>--><video......
  • #yyds干货盘点# 动态规划专题:拦截导弹
    1.简述:描述某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统。但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发......
  • #yyds干货盘点# LeetCode 腾讯精选练习 50 题:全排列
    题目:给定一个不含重复数字的数组nums,返回其所有可能的全排列。你可以按任意顺序返回答案。 示例1:输入:nums=[1,2,3]输出:[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2]......
  • #yyds干货盘点# LeetCode 腾讯精选练习 50 题:最大子数组和
    题目:给你一个整数数组nums,请你找出一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和。子数组是数组中的一个连续部分。 示例1:输入:nums=[-2,1,-3,4,-1,......