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


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用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="lantian">
    <input type="text" v-model="word"/>
    <h1>
        结果:{{result}}
    </h1>
</div>
<script>
    var app = new Vue({
            el: '#lantian',
            watch: {
                //使用debounce时,需要使用:npm install lodash安装lodash。
                word: _.debounce(
                    function (newV, oldV) {
                        axios.get('9.php?word=' + newV).then(function (response) {
                            console.log(response);
                            app.result = response.data;
                        });
                    }, 3000
                )
            },
            data: {
                word: '',
                result: ''
            }
        })
    ;
</script>
</body>
</html>

  


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM