问题描述

使用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. python+selenium之多窗口切换

    #打开浏览器driver = webdriver.Firefox()driver.get(url)#获取当前窗口now_handle=driver.current_window_handle # 获取 ...

  2. 用boost模块加速你的drupal站

    boost模块可以对 html, xml, ajax, css,  javascript进行缓存,极大提升游客访问的速度,几乎可以和静态页面媲美.下载boost http://drupal.org/p ...

  3. 分享一个WPF下日历控件（Calendar）的样式

    WPF日历控件的一个样式 WPF自带的日历控件样式可能会比较丑,要修改其样式看起来挺复杂的,实际上很简单,用Blend打开,修改三个模板,基本就能改变全部面貌,也很容易 先上图 样式如下: <S ...

  4. spring ajax以及页面返回中文乱码问题解决

    在spring配置文件中添加 <!--返回中文乱码--> <mvc:annotation-driven > <!-- 消息转换器 --> <mvc:messa ...

  5. 解决ie9以及以下console未定义

    页面明明已经删除了所有的console,但是ie9下依旧会报错 console未定义 只能这样解决了 window.console = window.console || (function () { ...

  6. php编译安装过程中遇到问题

    编译安装PHP时遇到的问题 问题1: configure: error: xml2-config not found. Please check your libxml2 installation. ...

  7. 关于web开发中订单自动超时和自动收货的简单方法(window server)

    最近做一个订单自动超时和自动收货的功能,因为以前是用的mysql 存储过程和定时器来完成,这次的业务逻辑相对复杂用以前的方式就不太合适,本来是准备使用定时执行php脚本来实现的,后来发现业务逻辑中使用 ...

  8. RStudio Server-0.99.902 (OpenLogic CentOS 7.2)

    RStudio Server-0.99.902 (OpenLogic CentOS 7.2) 0 评论 平台: CentOS 类型: 虚拟机镜像 软件包: r-3.2.3 rstudio-server ...

  9. Linux最常用命令实战

    1.改变机器的名称: vim /etc/hostname Master 在文件中修改机器名称为我们想要的名称(相当于域名) 可以通过shutdown -h now 关闭 2.查看当前机器IP: ifc ...

  10. LeetCode Implement strStr() 实现strstr()

    如题 思路:暴力就行了.1ms的暴力!!!别的牛人写出来的,我学而抄之~ int strStr(char* haystack, char* needle) { ; ; ; ++i) { ; ; ++j ...