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>