问题描述

使用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. pat1061. Dating (20)

    1061. Dating (20) 时间限制 50 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Sherlock Holmes ...

  2. druid监控sql

    我这里是以运维的角度查看sql, 前面的配置需要开发配合,参考:https://blog.csdn.net/u010391342/article/details/80606482 1.首先在注册中心( ...

  3. 解决WinSCP连接虚拟机

    其实虚拟机你也可以将它形象化,认为它就是一台电脑,只是这个电脑在你的内存中,所以,一般电脑所具有的的功能虚拟机一样拥有,它也可以当成一台独立的个体哦. 针对很多使用WinSCP连接不上虚拟机的问题,这 ...

  4. MongoDB 3.2 在CentOS 上的安装和配置

    MongoDB 3.2 在CentOS 上的安装和配置   2016-01-06 14:41:41 发布 您的评价:       0.0   收藏     0收藏 一.安装 编辑/etc/yum.re ...

  5. 页面中引入百度地图，实例化后影响html5的表单元素date的上下箭头

    复现步骤: 使用百度地图的JavaScript的API,引入文件地址"http://api.map.baidu.com/api?key=&v=1.1&services=tru ...

  6. c语言数据结构：用标志位实现循环队列

    #include<stdio.h> #include<stdlib.h> #define MAXSIZE 10//定义队列长度 ;//定义标志位 typedef struct ...

  7. windows安装ipython

    一.安装python2.71.下载地址https://www.python.org/downloads/2.安装后修改本地变量-右击电脑-属性-高级系统设置-环境变量-用户变量-新建-变量名:path ...

  8. 如何在Ubuntu server中修改IP

    详细请移步至博客https://blog.csdn.net/shenzhen_zsw/article/details/74025066 方法一. sudo  ifconfig eth0 100.100 ...

  9. Wince 6.0获取设备的分辨率 自动设置窗体位置

    调用微软提供给wince的API  “coredll.dll” [DllImport("coredll.dll")] public static extern int GetSys ...

  10. 获得session中的用户信息

    由于每个系统都有往session中放入用户信息以及把用户信息取出来的模块,而且在session中取出用户信息的地方非常之多,所以有必要把session中对用户的操作封装成为一个工具类,以便在以后的使用 ...