Vue中的计算属性（computed)、方法（methods)、watch(侦听)

一、相同点

三者都可以实现相同的功能，比如举个简单的例子

二、计算属性和方法不同点

主要讲一下不同点：
方法每次调用都会执行一次，与methods实现相比，计算属性内部有缓存机制（复用），效率更高，调试方便。值得一提的是，计算属性的缓存机制：
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
所以不用担心计算属性的值是否滞后，当数据改变，计算属性的值也随之改变

三、计算属性和侦听之间的区别：

1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
① 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
② 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。

	new Vue({
	   el:'#root',
	   data:{
		firstName:'张',
		lastName:'三',
		fullName:'张-三'
		},
	 watch:{
		firstName(val){
			setTimeout(()=>{
				console.log(this)
				this.fullName = val + '-' + this.lastName
				},1000);
			}
		}
	})

以上代码是数据源改变1秒后页面发生变化，异步操作，计算属性没法实现。