vue计算属性

<div id="example">
    {{message.split("").reverse().join("")}}
</div>

这是模板不在简单和清晰，在实现反向显示message之前，应该确认它，这个问题不知一次反向显示message的时候变得更加糟糕。

这就是为什么任何复杂逻辑，都应当使用计算属性。

实例：

<div id="example">
    <p>Original message : "{{message}}"</p>
    <p>Cpmputed reversed message : "{{reverseMessage}}"</p>
</div>

var vm=new Vue({
   el:'#example',
   data:{
       message:''Hello 
    },
    computed:{
    reversedMessage:function(){
       return this.message.split("").reverse().join("") 
     }    
    }
})
    

这里我们声明了一个计算属性，reverseMessage。我们提供的函数将作用水性vm.reversedMessage的 getter

计算缓存  vs  methods

我们通过调用表达式中的method可以达到同样的效果

<p>reverse message :'{{reverseMessage()}}'</p>

methods:{
  reverseMessage:function(){
    return this.message.split("").reverse().join("")
    }  
}

两种方式不同的是计算属性是基于他的依赖缓存。计算属性只有在他的相关依赖发生改变时才会重新取值，这就意味着只要message没有改变，多次访问reverseMessage计算属性hi立即返回之前的计算结果，而不必再次执行函数，

这也同样意味着如下计算属性将不会更新，因为Date.now()不是响应式依赖。

computed:{
     now:function(){
        return Date.now()    
    }       
}

相比而言。每次重新渲染的时候，method总会执行函数

计算属性  vs  Watched Property

vue提供了watch方法，用于观察vue实例上数据的变动。

<div id="demo">{{fullName}}</div>

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
　　}
　　
}
})

与计算属性相比：

var vm=new Vue({
　　el:'#demo',
　　data:{
　　　　firstName:'Foo',
　　　　lastName:'Bar'
　　},
　　computed:{
　　　　fullName:function(){
　　　　　　return this.firstName+''+this.lastName
　　　　}
　　}
})

计算setter

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

computed：{
　　fullName:{
　　　　//getter
　　　　get:function(){
　　　　　　return this.firstName+''+this.lastName
　　　　},
　　　　//setter
　　　　set:function(newValue){
　　　　　　var names=newValue.split('')
　　　　　　this.firstName=names[0]
　　　　　　this.lastName=names[names.length-1]
　　　　}
　　}
　　
}

观察watch

<div id="watch-example">
    <p>
　　　　Ask a yes/no question
　　　　<input type="text" v-model="question">
　　</p>
　　<p>
　　
　　{{answer}}
　　</p>
</div>

var watchExampleVM=new Vue({
　　el:'#watch-example',
　　data:{
　　　　question:'',
　　　　answer:'I cannot give you an answer until you ask a question'
　　},
　　　watch:{
　　　　question:function(newQuestion){
　　　　　　this.answer="Waiting for you to stop typing..."　　
　　　　　　this.getAnswer()
　　　　}
　　　　},
　　methods:{
　　　　getAnswer:_.debounce(
　　　　　　function(){
　　　　　　　　var vm=this
　　　　　　　　if(this.question.indexOf("?")===-1){
　　　　　　　　　　vm.answer="Questions usually contain a question mark. ;-"
　　　　　　　　　　return
　　　　　　　　}
　　　　　　　　vm.answer='thinking'
　　　　　　　　axios.get("http://yesno.wtf/api").then(function(response){
　　　　　　　　　　vm.answer=_.capitalize(response.data.answer)
　　　　　　　　}).catch(function(error){
　　　　　　　　　　vm.answer="Error counld not reach the api"+error
　　　　　　　　})
　　　　　　},500
　　　　)
　　}
})

watch选项允许我们执行异步操作（访问一个api），限制我们执行该操作的频率，并在我们的得到结果前，设置中间状态。这是计算属性 无法做到的。