2021-7-11 Vue的计算属性和侦听器
计算属性是为了让页面显示更加简洁,基于data数据进行处理的方法,以下为实例

<!DOCTYPE html> <html> <head> <title> </title> </head> <body> <div id="app"> <input type="text" name="" v-model="msg"> {{reverseMsg}} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script type="text/javascript"> //在原生js中使用 var vm=new Vue({ el:'#app', data:{ msg:'' }, computed:{ reverseMsg:function(){ return this.msg.split('').reverse().join('');//split分割,reverse反转,join拼接 } } }); </script> </body> </html>
计算属性和方法的区别:
计算属性是有缓存的,只要data数据不发生改变,会直接调用上次计算好的值(节省时间,节约性能)
方法则是没有缓存,不管data是否发生改变,都会重新执行一次方法
侦听器和计算属性有点类似,但是侦听器常用于异步或者开销较大的计算,以下为侦听器实例

<!DOCTYPE html> <html> <head> <title> </title> </head> <body> <div id="app"> <input type="text" name="" v-model="msg"> <input type="text" name="" v-model="msg1"> {{msg2}} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script type="text/javascript"> //在原生js中使用 var vm=new Vue({ el:'#app', data:{ msg:'', msg1:'', msg2:'' }, watch:{ msg:function(val){ this.msg2=val+' '+this.msg1; }, msg1:function(val){ this.msg2=this.msg+' '+val; } } }); </script> </body> </html>
使用侦听器来模拟异步返回的效果

<!DOCTYPE html> <html> <head> <title> </title> </head> <body> <div id="app"> <input type="text" name="" v-model.lazy="msg"> {{tip}} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script type="text/javascript"> //在原生js中使用 var vm=new Vue({ el:'#app', data:{ msg:'', tip:'' }, methods:{ checkName:function(msg){ var that=this; setTimeout(function(){ if (msg=='admin') { that.tip='已存在'; } else{ that.tip='成功'; } },2000); } }, watch:{ msg:function(val){ this.checkName(val);//内部调用时记得加this this.tip='正在验证'; } } }); </script> </body> </html>