computed
用于计算复杂逻辑

  1. <div id="app">
  2.      {{ message.split('').reverse().join('') }} 
  3. </div>
  4. <div id="app">
  5.   <p>原始字符串: {{ message }}</p>
  6.   <p>计算后反转字符串: {{ reversedMessage }}</p>
  7. </div>
  8. <script> 
  9.   var vm = new Vue({ 
  10.   el: '#app', 
  11.   data: { message: 'Runoob!' },
  12.         computed: { // 计算属性的 getter 
  13.   reversedMessage: function () { 
  14.   // `this` 指向 vm 实例
  15.       return this.message.split('').reverse().join('')
  16.       } 
  17.   } 
  18.   }) 
  19. </script>

computed VS methods

使用methods来替代computed，效果上是一样的，但是computed会被依赖缓存，只有相关依赖改变时才会重新。而使用 methods ，在重新渲染的时候，函数总会重新调用执行

computed setter

默认属性只有getter ，需要时可以提供一个setter

  1. computed: {
  2.   site: {
  3.     // getter
  4.     get: function(){
  5.         returnthis.name + '' + this.url
  6.       }，
  7.       // setter
  8.       set: function(newValue){
  9.       var names = newValue.split('')
  10.       this.name = names[0]
  11.       this.url = names[names.length - 1]
  12.     }
  13.   }
  14. }