Vue.js中watch、computed、和methods三者区别~

最近再次复习了vue.js，一直混淆watch、computed、和methods三者。就谢谢笔记吧~

1.computed：

属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，主要当作属性来使用。

例:

computed:{
	test1:function(){
		return 'computed:test1';
	},
	test2(){
		return 'computed:test2'
	}
}
//html引用
{{test1}}
{{test2}}

2.methods：

是一个方法，表示一个具体的操作，主要书写业务逻辑。

例：

methods:{
	handleSubmit(){
		this.count +=1
		console.log('count:'+this.count)
	},
	logInfo(event){
		console.log(event);
	},
	test(){
		return 'methods:test';
	}
}

<form v-on:submit.prevent="handleSubmit()">
	<p>无pervent</p>
	<input type="submit" value="提交" />
</form>
<input type="text" v-on:keyup.enter="logInfo(event)" />
<input type="text" @click.ctrl="logInfo(event)" />
{{test()}}

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

3.watch(侦听属性)：

是一个对象，键是需要观察的表达式，值是对应回调函数，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看做是computed和methods 的结合体。

例：

let app11 = new Vue({
	el: '#app-11',
	data: {
		firstName: 'Foo',
		lastName: 'Bar',
		fullName: '1'
	},
	watch: {
		firstName: function(val) {
			this.fullName = val + ' ' + this.lastName
		},
		lastName: function(val) {
			this.fullName = this.firstName + ' ' + val
		},
		firstName: function(newValue,oldValue){
			console.log(newValue+'   '+oldValue)
			//console.log('changed firstName')
		}
	}	
});

<div id="app-11">
	{{ firstName }}
	<input type="text"  v-model="firstName"/>
</div>

-->http://www.imooc.com/article/49239?block_id=tuijian_wz 不错的总结吧~