5.watch監聽屬性 · 程序員開發筆記

#### watch監聽屬性變化實現類百度搜索欄功能 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript" src="node_modules/axios/dist/axios.js"></script> <title>watch</title> </head> <body> <div id="xy"> <input type="text" v-model="word"> 結果：{{result}} </div> <script type="text/javascript"> var app = new Vue({ el: "#xy", watch:{ word:function(newW,oldW){ axios.get('index.php?word='+newW).then(function (response) { app.result = response.data; }) } }, data: { word:"", result:"", } }); </script> </body> </html> php 代碼： <?php echo "您好".$_GET['word']; 上面的代碼會存在一個問題。就是輸入一個內容查詢一次后臺，這樣導致了服務器的壓力 https://www.lodashjs.com/ _.debounce延遲加載 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript" src="node_modules/axios/dist/axios.js"></script> <script type="text/javascript" src="node_modules/lodash/lodash.js"></script> <title>watch</title> </head> <body> <div id="xy"> <input type="text" v-model="word"> 結果：{{result}} </div> <script type="text/javascript"> var app = new Vue({ el: "#xy", watch:{ word:_.debounce( function(newW,oldW){ axios.get('index.php?word='+newW).then(function (response) { app.result = response.data; }) },1000 ) }, data: { word:"", result:"", } }); </script> </body> </html>