vue笔记--计算属性

1.html

<div id="app">

<p>Original message:"{{message}}"</p>

</div>

2.script

var app = new Vue({

el:"#app",

data:{

message:'Hello!'

},

computed:{

reverseMessage:function(){

return this.message.split('').reverse().join('');

}

}

})

计算缓存vs method


我们可以通过调用表达式中的method来达到同样的效果
不经过计算属性，我们可以在method中定义一个相同的函数来替代它。对于最终的效果，
两种方式确实是相同的，然而，不同的是计算属性是基于它的一栏缓存。计算属性只有在
它的相关依赖发生变化时才会重新取值。这就意味着只要message没有发生改变，多次
访问reverseMessage计算属性会立即返回计算结果，而不必再次执行函数。
相比而言，每当重新渲染的时候，method调用总会执行函数。


计算缓存 vs watched property


vue.js提供了一个方法$watch,它对于vue实例上的数据变动。当一些数据需根据其他数据变化时，
$watch很诱人。不过通常更好的办法用计算属性而不是命令式的$watch回调
$watch:
<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
computed:{
  fullName:{
    get:function(){
      return this.firstName+' '+lastName
    },
    set:function(newValue){
      var names = newValue.split(' ');
      this.firstName = names[0]
      this.lastName = names[names.length-1]
    }
  }
}
现在运行vm.fullname = 'John Doe'时，setter会被调用，vm.firstName和vm.lastName
也会被对应更新。




观察watchers


虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的watcher。这是为什么Vue提供
一个更通用的方法通过watch选项，来响应数据变化。当你想要在数据变化响应时，执行一部操作
或开销较大的操作，这是很有用的。


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


script


var watchExampleVM = new Vue({
  el:'#watch-example',
  data:{
    question:'',
    anwser:'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
      }
      wm.answer = 'Think...'
      axios.get('https://yesno.wtf/api')
      .then(function(response){
        vm.answer = _.capitalize(response.data.answer)
      })
      .catch(function(error){
        vm.answer = "Error! Could not reach the API"+error
      })
    },
    500
    )
  }
})