Vue use lodash watch for the library to reduce the background pressure request

lodash need to introduce new

I'm using npm way

Use _.debounce method of lodash

Specific code:

<!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 not control body and html tags -> 
    < INPUT type = "text" V-Model = "Word" > 
    < h1 of > {{}} Result </ h1 of > 
</ div > 
< Script > 
    var App =  new new Vue ({ // instantiate VUE 
        EL: ' #ask ' , // VUE ask the control of the element id,
        // Watch can monitor multiple variables 
        watch: {
            // listener word variable 
            word: _ Debounce (. Function (newV, oldV) { 
                the console.log ( ' old value: ' + oldV + ' =======> new value: ' + newV);
                 // where I can write an asynchronous request to use the Axios 
                axios.get ( ' api.php Word =? ' + newV) .then ( function (RES) { 
                    console.log (RES, ' this is the value returned by asynchronous ' );
                     // here asynchronous write operation after the value obtained 
                    app.result = res.data; 
                });
            },3000)
        },
        data:{
            word:'',
            result:''

        }
    });
</script>
</body>
</html>

 

Guess you like

Origin www.cnblogs.com/tommymarc/p/11627438.html