vue中计算属性（computed）、侦听属性（watch）、方法（method）三者的不同

computed区别于method的区别

1.computed是属性调用，而method是函数调用

​在html的插值内：computed定义的方法是以属性访问的形式调用，methods定义的方法必须加上（）来调用：（如下）

<div id="example">   
		<p>Original message: "{{ message }}"</p>   
		<p>使用计算属性实现: "{{ reversedMessage }}"</p>
		<p>使用方法实现: "{{ reversedMessage() }}"</p>
 </div>

使用计算属性实现

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

使用方法实现

// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

2.
计算属性是基于他们的响应式依赖进行缓存的。只在响应式依赖发生改变时，才会重新求值。如果没有发生改变，就会直接调用缓存，不必再次执行函数

computed 与 watch的区别

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

使用侦听属性（watch）实现

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
    }
  }
})

使用计算属性（computed）

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

同：computed和watch都是观察页面的数据变化的。

异：1.computed只有当页面数据变化时才会计算，当数据没有变化的时候，他会读取缓存。而watch每次都需要执行函数，methods也是每次都需要执行
2.数据变化时执行异步或者开销比较大的操作的时候，这时候使用watch是合适的