Vue 使用lodash库减少watch对后台请求压力
lodash需要新引入
我使用的是npm方式
使用lodash的_.debounce方法
具体代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js 使用lodash库减少watch对后台请求压力 </title>
<script src="vue.js"></script>
<script src="node_modules/axios/dist/axios.js"></script>
<script src="node_modules/lodash/lodash.js"></script>
</head>
<body>
<div id="ask"><!--vue不能控制body和html的标签-->
<input type="text" v-model="word">
<h1>{{result}}</h1>
</div>
<script>
var app = new Vue({ //实例化vue
el:'#ask',//vue控制id为ask的元素,
//watch 可以监听多个变量
watch:{
//监听word变量
word:_.debounce(function (newV,oldV) {
console.log('旧值:'+oldV+'=======>新值:'+newV);
//这里可以写异步请求我用的是axios
axios.get('Api.php?word='+newV).then(function (res) {
console.log(res,'这是异步返回的值');
//这里写异步得到值之后的动作
app.result=res.data;
});
},3000)
},
data:{
word:'',
result:'' }
});
</script>
</body>
</html>
Vue 使用lodash库减少watch对后台请求压力的更多相关文章
- 010——VUE中使用lodash库减少watch对后台请求的压力
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 10.VUE学习之使用lodash库减少watch对后台请求的压力
问题描述 使用watch监听库里word的值的变化,获取新值后,用oxios发送的ajax异步请求, 此时会多次发送请求,浪费服务器资料. 解决办法 使用lodash库里的_.debounce函数延缓 ...
- 16款优秀的Vue UI组件库推荐
16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...
- 强烈推荐优秀的Vue UI组件库
Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...
- 【转】优秀的Vue UI组件库
原文来源:https://www.leixuesong.com/3342 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司 ...
- 使用webpack4搭建一个基于Vue的组件库
组内负责的几个项目都有一些一样的公共组件,所以就着手搭建了个公共组件开发脚手架,第一次开发 library,所以是参考着 iview 的配置来搭建的.记录如何使用webpack4搭建一个library ...
- Vue.js+vue-element搭建属于自己的后台管理模板：什么是Vue.js?（一）
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js是什么?(一) 前言 本教程主要讲解关于前端Vue.js框架相关技术知识,通过学习一步一步学会搭建属于自己的后台管理模板,并 ...
- Vue.js+vue-element搭建属于自己的后台管理模板：更深入了解Vue.js（三）
前言 上一章我们介绍了关于Vue实例中一些基本用法,但是组件.自定义指令.Render函数这些放到了本章来介绍,原因是它们要比前面讲的要难一些,组件是Vue.js最核心的功能,学习使用组件也是必不可少 ...
- 基于Vue开发的门户网站展示和后台数据管理系统
基于Vue的前端框架有很多,这几年随着前端技术的官方应用,总有是学不完的前端知识在等着我们,一个人的精力也是有限,不可能一一掌握,不过我们学习很大程度都会靠兴趣驱动,或者目标导向,最终是可以以点破面, ...
随机推荐
- 深入Pytorch微分传参
导数 这段代码揭示了多个变量的微分以及如何求解loss为向量的导数 m1 = Variable(torch.ones((3,2)), requires_grad=True) m2 = Variable ...
- 《转》sql处理百万级以上的数据提高查询速度的方法
处理百万级以上的数据提高查询速度的方法: 1.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使用索引而进行全表扫描. 2.对查询进行优化,应尽量避免全表扫描,首先应考 ...
- 关于Django
Django项目的初始化配置包括 数据库配置 Django 配置 应用程序配置 关于项目和应用 应用是一个专门做某件事的网络应用程序——比如博客系统,或者公共记录的数据库,或者简单的投票程序 项目则是 ...
- IT兄弟连 Java语法教程 综合案例
1．案例需求 编写程序,模拟斗地主游戏洗牌和发牌的流程. 2．应用知识 ● 数组的声明 ● 数组的遍历 ● for循环 ● if-else分支结构 3．需求解析 模拟斗地主游戏洗牌和发牌,需要 ...
- LeetCode 71.简化路径
LeetCode 71.简化路径 题目描述: 以 Unix 风格给出一个文件的绝对路径,你需要简化它.或者换句话说,将其转换为规范路径.在 Unix 风格的文件系统中,一个点(.)表示当前目录本身:此 ...
- jQuery 源码分析(十一) 队列模块 Queue详解
队列是常用的数据结构之一,只允许在表的前端(队头)进行删除操作(出队),在表的后端(队尾)进行插入操作(入队).特点是先进先出,最先插入的元素最先被删除. 在jQuery内部,队列模块为动画模块提供基 ...
- javascript构造函数深度克隆递归
<script type="text/javascript"> var obj={ name:'段丛磊', gex:18, sss:['李伟',18], fun:fun ...
- go-函数和错误处理
函数基本语法 func 函数名(形参列表)(返回值列表){ 执行语句 return 返回值列表 }//返回值可以没有可以有多个可以有一个 包 引入 为了解决两个程序员取得函数名同名的情况 原理 本质就 ...
- python基础(30):黏包、socket的其他方法
1. 黏包 1.1 黏包现象 让我们基于tcp先制作一个远程执行命令的程序(命令ls -l ; lllllll ; pwd) 同时执行多条命令之后,得到的结果很可能只有一部分,在执行其他命令的时候又接 ...
- Java关键字之abstract、final、static用法
abstract:即抽象的,可以修饰类.方法: 修饰类:当有一个方法为抽象方法时,这个类就是抽象类,抽象类不能被new,它是一个不完整的类. 修饰方法:这个方法就是抽象的,即只能方法的定义,没有方法的 ...