computed计算属性

借鉴官网的例子，为了理解的更好，所以动手试了试，然后做下笔记。

computed计算属性的简单使用

template

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

script

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

结果：
–Original message: “Hello”

–Computed reversed message: “olleH”

computed vs methods

<p>Reversed message: "{{ reversedMessage() }}"</p>

methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

这样我们也能进行计算属性，但是它们为题不同的地方是：计算属性computed当数据没有发生变化的时候是走缓存的，而methods是每次不管数据有没有发生变化都是重新计算的，所以如果考虑细微的优化性能的话，还是考虑采用computed

computed vs watch

watch例子

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

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    //当监听两个或多个变量的时候就形成了命令式 + 繁琐的语句。
    firstName (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName (val) {
      this.fullName = this.firstName + ' ' + val
    }，
    //。。。。。。。。。。。。。
  }
})

computed例子

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

有不对的地方，还请各位指出。一起成长