vue中计算属性computed，侦听器watch和method

基础例子

<div id="example">

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

  <p>Computed reversed message: "{{ reversedMessage }}"</p>

</div>

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"

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

console.log(vm.reversedMessage) // => 'olleH'

vm.message = 'Goodbye'

console.log(vm.reversedMessage) // => 'eybdooG'

计算属性缓存 vs 方法

你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果：

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

// 在组件中

methods: {

  reversedMessage: function () {

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

  }

}

它们最主要的区别是计算属性是基于它们的响应式依赖进行缓存的，每次访问的时候都是返回之前函数执行的结果，而methods方法需要每次调用

计算属性 vs 侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，然而，通常更好的做法是使用计算属性而不是命令式的 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

    }

  }

})

侦听器是侦听到firstName和lastName变化是，fullName也发生变动，但是与计算属性相比还是计算属性更加简洁