Vue —— 计算属性 & 监听属性

一、计算属性

计算属性关键词:computed。

计算属性在处理一些复杂逻辑时是很有用的。

使用计算属性反转字符串

原始字符串{{msg}}

计算后的字符串{{reverseMsg}}

varvm=newVue({el:'#app',data:{msg:'Helloworld!'},computed:{//计算属性的getterreverseMsg:function{//`this`指向vm实例returnthis.msg.split('').reverse.join('')}}})

计算属性reversedMsg。

提供的函数将用作属性vm.reverseMsg的getter。

vm.reverseMsg依赖于vm.msg，在vm.msg发生改变时，vm.reverseMsg也会更新。

computed和methods的比较

可以使用methods来替代computed，效果上两个都是一样的。

但是computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。

而使用methods，在重新渲染的时候，函数总会重新调用执行。

使用computed在{{}}里面调用时不同加，而使用methods在{{}}调用时需要加

在标签内调用时，conputed和methods均不用加

原始字符串:{{message}}

计算后反转字符串:{{reversedMessage}}

计算后反转字符串:{{reversedMessage}}

使用方法后反转字符串:{{reversedMessage2}}

使用方法后反转字符串:{{reversedMessage2}}

varcnt=1;varvm=newVue({el:'#app',data:{message:'Runoob!'},computed:{//计算属性的getterreversedMessage:function{//`this`指向vm实例cnt+=1;returncnt+this.message.split('').reverse.join('')}},methods:{reversedMessage2:function{cnt+=1;returncnt+this.message.split('').reverse.join('')}}})

二、监听属性

可以通过watch来响应数据的变化。

通过watch实现计数器

计数器:{{counter}}

点我varvm=newVue({el:'#app',data:{counter:1},watch:{counter:function(nval,oval){alert(oval+'变为'+nval)}}})

千米和米之间的换算

千米：米：varvm=newVue({el:'#app',data:{kilometers:0,meters:0},watch:{kilometers:function(val){this.kilometers=valthis.meters=this.kilometers*1000},meters:function(val){this.kilometers=val/1000this.meters=val}}})

以上代码中创建了两个输入框，data属性中，kilometers和meters初始值都为0。

watch对象创建了data对象的两个监控方法：kilometers和meters。

当在输入框输入数据时，watch会实时监听数据变化并改变自身的值。

不积跬步无以至千里不积小流无以成江海