zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    6.25作业
    博客园第一篇
    532. 数组中的K-diff数对
    echarts
    跨域问题
    数组中第三大的数 leetcode 414
    除自身以外数组的乘积leetcode 238
    xshell工具
    插入、删除和随机查询时间复杂度都为O(1) leetcode 381
    组合总和3 leetcode 216
  • 原文地址:https://www.cnblogs.com/tommymarc/p/11627438.html
Copyright © 2011-2022 走看看