问题描述

使用watch监听库里word的值的变化,获取新值后,用oxios发送的ajax异步请求,

此时会多次发送请求,浪费服务器资料.

解决办法

使用lodash库里的_.debounce函数延缓异步请求的时间,减少对后台请求的压力,设定库里值动态变化后在规定的时间后再异步请求

步骤:

1.安装lodash.

npm install lodash

使用说明:

文档地址:

https://www.css88.com/doc/lodash/#_debouncefunc-wait0-options

2.页面里引入js

<script type="text/javascript" src="../vue/node_modules/lodash/lodash.js"></script>

3.使用_.debounce函数

_.debounce(func, [wait=0], [options={}])

4.完整代码:

10.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>vue</title>

    <link rel="stylesheet" href="">

    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->

    <script type="text/javascript" src="../js/vue.js"></script>

    <!---发送异步请求-->

    <script type="text/javascript" src="../vue/node_modules/axios/dist/axios.js"></script>

    <!---延缓异步请求的时间-->

    <script type="text/javascript" src="../vue/node_modules/lodash/lodash.js"></script>

</head>

<body>

<div id="vue">

    <!--当input里的值改变时,会改变data里的word-->

    <input type="text" v-model="word">

    <h1>

        <!--拿到data里的result里的值-->

        结果:{{result}}

    </h1>

</div>

</body>

<script type="text/javascript">

    var app=new Vue({

        el:'#vue',

        watch:{ //监听data里的word的变化

            //			拿到input里的新值和旧值

            word:_.debounce(

                    function(new_v,old_v){

                        //		        console.log(new_v+'=>'+old_v);

                        var url = '9.php?word='+new_v;

                        //				ajax get异步请求

                        axios.get(url).then(function(response){

                            console.log(response);

                            app.result = response.data //赋值给data里的result

                        });

                    },1000 //1秒后执行

            )

        },

        data:{

            word:'',

            result:''

        }

    });

</script>

</html>

10.php

<?php

/**

 * Created by PhpStorm.

 * User: Administrator

 * Date: 2019/1/5

 * Time: 10:42

 */

print_r('要搜索的内容是:'.$_GET['word']);

?>

10.VUE学习之使用lodash库减少watch对后台请求的压力的更多相关文章

  1. 010——VUE中使用lodash库减少watch对后台请求的压力

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Vue 使用lodash库减少watch对后台请求压力

    lodash需要新引入 我使用的是npm方式 使用lodash的_.debounce方法 具体代码: <!doctype html> <html lang="en" ...

  3. 10 Vue 学习 shortList页面

    1: shortList页面代码如下: <template> <div class="fillcontain"> <head-top></ ...

  4. day 86 Vue学习之五DIY脚手架、webpack使用、vue-cli的使用、element-ui

      本节目录 一 vue获取原生DOM的方式 二 DIY脚手架 三 vue-cli脚手架的使用 四 webpack创建项目的玩法 五 element-ui的使用 六 xxx 七 xxx 八 xxx 一 ...

  5. day 83 Vue学习之五DIY脚手架、webpack使用、vue-cli的使用、element-ui

      Vue学习之五DIY脚手架.webpack使用.vue-cli的使用.element-ui   本节目录 一 vue获取原生DOM的方式 二 DIY脚手架 三 vue-cli脚手架的使用 四 we ...

  6. day 83 Vue学习三之vue组件

    本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...

  7. Vue学习看这篇就够

    Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的 ...

  8. day 82 Vue学习三之vue组件

      Vue学习三之vue组件   本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...

  9. day 84 Vue学习四之过滤器、钩子函数、路由、全家桶等

      本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤器 1 moment.js 在这里我们先介绍一个 ...

随机推荐

  1. UVA - 12333 Revenge of Fibonacci 高精度加法 + 字典树

    题目:给定一个长度为40的数字,问其是否在前100000项fibonacci数的前缀 因为是前缀,容易想到字典树,同时因为数字的长度只有40,所以我们只要把fib数的前40位加入字典树即可.这里主要讨 ...

  2. Storm概念学习系列之Topology拓扑

    不多说,直接上干货!   Hadoop 上运行的是 MapReduce 作业,而在 Storm 上运行的是拓扑 Topology,这两者之间是非常不同的.一个关键的区别是:一个MapReduce 作业 ...

  3. linux增加/删除虚拟IP地址

    网卡上增加一个IP: ifconfig eth0:1 192.168.0.1 netmask 255.255.255.0 删除网卡的第二个IP地址: ip addr del 192.168.0.1 d ...

  4. SharePoint 2010开发方面的课堂中整理有关问题

    SharePoint 2010开发方面的课堂中整理有关问题 这是我这几天在做一个SharePoint开发的课程的时候,大家提出的一些问题,及我的解答,分享给更多的朋友参考一下 这个文档,也可以在这里下 ...

  5. HDU 5445——Food Problem——————【多重背包】

    Food Problem Time Limit: 3000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)To ...

  6. css中 repeat-x 的简单用法

    问repeat-x 00 中: 0 0 是 什么意思,如果改为0 -50呢,不写话默认是什么(不写话和0 0  的效果不一样)- ------<html><head><s ...

  7. UPDATE SQL 不同环境执行结果不一样

    背景:1.前台:JQUERY 提交数据 2.后台:OWIN C#  处理接收数据 3.数据库: postgresql ========================================= ...

  8. WPF学习二：TextBlock和Label的区别

    TextBlock和Label都是用来显示少量数据的.好多文章对Label存在的描述都是它允许使用"快速获取"."快速获取"就是允许你用Alt加上其它的按键快速 ...

  9. sql2012，返回数据多时不走索引

    当数据达到一定值时,都会走表扫描旧版如SQL2005时就有计算选择性的比例为 满足条件的行数/总行数<=0.7181,会走索引,其它会走表扫描有兴趣可以自己去不同版本中去测试 Roy Wu(吴熹 ...

  10. tomcat jvm参数优化

    根据gc(垃圾回收器)的选择,进行参数优化 JVM给了三种选择:串行收集器.并行收集器.并发收集器,但是串行收集器只适用于小数据量的情况,所以这里的选择主要针对并行收集器和并发收集器. -XX:+Us ...