Vue进阶step2-computed(计算属性)

摘要:

{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }}
模板内的表达式是非常便利的,但是他们实际上只用于简答的运算;在模板上放有太多的逻辑会让模板过重难以维护;这就是对于任何复杂的逻辑,你都应该使用计算属性的原因;

接下来我们将computed属性与methods watch属性进行一些简单的比较;

• 1:computed属性;

经过处理返回的数据值,只要源数据没有发生改变,computed函数里面对相应的数据就不会反生改变,相当于缓存在本地;发生改变的时候,computed对应数据的函数也会发生改变;
在这里我们声明一个计算属性reversedMessage;我们提供的函数将作为属性vm.reb=versedMessage的getter.
console.log(vm.reversedMessage);
vm.message="Goodbye";
console.log(vm.reversedMessage);
你可以打开浏览器的控制台,自行修改;

HTML部分
<div id="example"> <p>origonal message:"{{message}}"</p> <p>Computed reversed message:"{{reversedMessage}}"</p> <p>{{now}}</p> </div>
js部分
var vm=new Vue({ el:"#example",//定义作用域 data:{ message:"hello"//存放全局数据; }, computed:{ //a computed getter ---computed中具有get属性 reversedMessage:function(){ return this.message.split("").reverse().join(""); },//对应上面的reversedMessage属性 now:function(){ return Date.now(); }//Vue提供获取时间的方法---对上面个的now变量; } });

• 2:computed属性和methods属性

你可能已经注意到我们可以通过调用method来达到同样的效果:
我们可以将同一个函数定义为一个method而不是一个计算属性,对于最终的结果,两种方式确实是相同的,
<strong>然而,计算属性是基于他们的依赖就行缓存的,计算属性只有在它相关的依赖发生改变时才会重新求值,这意味着只要message 还没有发生改变,多次访问reversedMessage计算属性会立刻返回之前计划算的结果,而不必再次执行函数.这也同样意味着下面的计算属性将不再更新,</strong>
相比而言,只要发生重新渲染,method调用总会执行该函数;
我们为什么需要缓存?假设我们有一个性能开销比较大的计划属性A,
它需要便利一个极大的数组和做很大量的计算,然后我们可能尤其他的计算属性依赖A,
如果没有缓存,我们将不可避免的多次执行A的geteer,如果你不希望有缓存,请用methods代替;
因为Date.now()不是响应式依赖;

HTML部分
<div id="example"> <p>Reversed message :"{{reversedMessage()}}"</p> </div>
js部分
methods:{ reversedMessage:function(){ return this.message.split("").reverse().join(''); } };

• 3:computed属性与watch属性;

vue确实提供了一种更通用的一种方式来观察和响应Vue实例上的数据变动:watch属性;当你有一些数据需要随着其他数据进行便动,你会很容易滥用watch--特别是你之前使用过AngularJS.然后,通常更好的想法就是使用computed属性而不是命令式的watch回调

- 就直接写两这个JS部分代码的比较吧;

通过watch实现对变量的监控
var vm=new Vue({
el:"#demo",
data:{
    firstName:"Foo",
    lastName:"Bar",
    fullName:"foo Bar"
},
watch:{
    firstName:function(val){
        this.fullName=val+" "+this.lastName
    },
    lastName:function(val){
        this.fullName=this.firstName+" "+val
    }
}
});
但是如果要是使用computed来实现这个功能的话;写作如下:
var vm=new Vue({
el:"#demo",
data:{
    firstName:"foo",
    lastName:"Bar",
    fullName:"foo Bar"
},
computed:{
    fullName:function(){
        get:function(){
            return this.firstName+" "+this.lastName;
        }   
    }
}
});
通过比较,computed的优势就出来了;

• 4:computed中的属性;

  计算属性默认只有getter不过在需要时也可以提供一个setter;

    var vm=new Vue({
    el:"#demo",
    data:{
    firstName:"foo",
    lastName:"Bar",
    fullName:"foo Bar"
  },
  computed:{
    fullName:function(){
        get:function(){
            return this.firstName+" "+this.lastName;
        },
        setter:function(){
            var names=newValue.split('');
            this.firstName=names[0];
            this.lastName=names[names.length-1]
        }
        
    }
  }
  });