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

/ 0评 / 0

最近再次复习了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 不错的总结吧~

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注