Vue中 computed、methods和watch的区别

1. computed 和 methods

相同点:
computed是计算属性，methods是方法，都可以实现对 data 中的数据加工 后再输出
不同点:
调用方式不同: computed直接以对象属性方式调用，不需要加括号，而methods必须要函数执行才可以得到结果。
绑定方式不同: methods与computed的get方式都是单向绑定，不可以更改输入框中的值。compute的get与set方式是真正的双向绑定。
是否存在缓存: methods没有缓存，调用相同的值计算还是会重新计算。competed有缓存，在值不变的情况下不会再次计算，而是直接使用缓存中的值。

computed 计算属性是基于它们的依赖进行缓存的。计算属性 computed 只有在它的相关依赖发生改变时才会重新求值。这就意味着只要data 中的数据 message 还没有发生改变，多次访问 reversedMessage（对message 进行加工的处理函数） 计算属性会立即返回之前的计算结果，而不必再次执行函数。而对于method ，只要发生重新渲染，method 调用总会执行该函数。
当有一个性能开销比较大的的计算属性 A ，它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A ，这时候，我们就需要缓存。也就是使用 computed 而不是 methods。但对于每次都需要进行重新计算的属性比如下面这个函数的返回值 function () { return Date.now() } ，我们最好使用 methods。

总之： 数据量大，需要缓存的时候用 computed ；每次确实需要重新加载，不需要缓存时用 methods 。

2. computed 和 watch

计算属性顾名思义就是通过其他变量计算得来的另一个属性， fullName 在它所依赖 firstName ， lastName 这两个变量变化时重新计算自己的值。
另外，计算属性具有缓存。计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 lastName 和 firstName都没有发生改变，多次访问 fullName 计算属性会立即返回之前的计算结果，而不必再次执行函数。
而侦听器 watch 是侦听一个特定的值，当该值变化时执行特定的函数。例如分页组件中，我们可以监听当前页码，当页码变化时执行对应的获取数据的函数。

	  <label for="">姓:</label><input type="text" placeholder="姓" v-model="firstname"><br>
	  <label for="">名:</label><input type="text" placeholder="名" v-model="lastname"><br>
	  <label for="">姓名:</label><input type="text" v-model="fullName">
	//computed 
	computed : {
		 fullname() {
		      console.log("这是计算属性");
		      return this.firstname + "·" + this.lastname;
		    }
		  }
	//watch
	  watch: {
	    firstname(value) {
	      console.log("this is watch");
	      this.fullname2 = this.lastname + "·" + value;
	    },
	    lastname(value) {
	      console.log("this is watch");
	      this.fullname2 = this.firstname + "·" + value;
	    }
	  }

也就是说，computed 对于其中变量的依赖是多个的，它的函数中使用了多个 this.xxx ,只要其中一个发生了变化，都会触发这个函数。而 watch 的依赖则是单个的，它每次只可以对一个变量进行监控。