问题描述

使用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. mysql sql语句集锦

    1.说明:创建数据库 CREATE DATABASE database-name 2.说明:删除数据库 drop database dbname 3.说明:备份sql server --- 创建 备份 ...

  2. 关于SQL Server数据库中的标识列

    一.标识列的定义以及特点 SQL Server中的标识列又称标识符列,习惯上又叫自增列. 该种列具有以下三种特点: 1.列的数据类型为不带小数的数值类型 2.在进行插入(Insert)操作时,该列的值 ...

  3. SpringBoot | 第三章：springboot配置详解

    基于springboot的约定优于配置的原则,在多数情况下,启动一个应用时,基本上无需做太多的配置,应用就能正常启动.但在大部分开发环境下,添加额外配置是无所避免的,比如自定义应用端口号(比较在机器比 ...

  4. Java排序算法（三）

    Java排序算法(三) 三.Java排序算法总结 从这三组时间复杂度对比中,可以看出,堆排序和归并排序是不管在什么情况下发挥稳定的,快速排序好的时候表现如天才,坏情况下比较差强人意,甚至在等待排序个数 ...

  5. SpringMVC07SelfException 自定义异常

    1.配置web.xml文件 <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3// ...

  6. Web框架的应用

    从今天开始,我们将要学习有关Web框架的一些内容,在学习之前先来学习一下http协议,即基于http是如何通信的. http 概要:http是基于tcp/ip通信协议来传输数据的. 优点: 1.简单快 ...

  7. python中函数的定义与调用

    1.为什么要用函数? (1)代码重复太多(2)可读性差 使用函数的好处: (1)代码重用 (2)保持一致性,易维护 (2)可扩展性 2.初始函数定义与调用     函数的定义 def test(x): ...

  8. vue-elem-配置静态模拟数据访问接口

    使用本地mock数据模拟真实数据配置 static/data.json dev.server.js中 var app=express();之后添加以下代码, var appData=require(' ...

  9. fancyBox高级进阶用法

    最近给客户做的一个项目中,客户要求弹窗的边界与页面某个区块边界平齐,但平齐之后,弹出的窗口就不是居中的情况了,研究之后,认为需要改写fancyBox的fancybox-wrap类中的top属性才能达到 ...

  10. python剑指offer 包含min函数的栈

    题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数(时间复杂度应为O(1)). # -*- coding:utf-8 -*- class Solution: def ...