computed属性基本用法

computed字面意思是需要计算的，它的作用说白了就是包含一堆函数，这些函数是用于处理data的内容。

computed跟data平级，computed相当于操作臂，data相当于原材料，computed的函数会对data的数据进行计算加工。

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

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

computed的setter

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter。

<div id="app">
  <p>{{ site }}</p>

</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    name: 'Google',
    url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + '：' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 如果只执行到这里，浏览器会打印Google：http://www.google.com

// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
// 到这里，屏幕上就不是Google这一串字符，而是菜鸟教程：http://www.runoob.com
</script>