Vue中计算属性computed和侦听器watch的区别和使用

Vue中计算属性computed和侦听器watch

计算属性computed

1、支持缓存：只有当依赖数据发生变化时,才会重新计算
2、不支持异步：计算属性是取返回值来作为最新的结果，所以里面不能有异步操作

		<div id = 'app'>
			{{fullName}}
			<div @click="handleClick">点击</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					firstName:'Json',
					lastName:'Li'
				},
				methods:{
					handleClick(){
						this.firstName = 'Nick'
					}
				},
				computed:{
					fullName(){
						return this.firstName + ' ' + this.lastName
					}
				}
			})
			
		</script>

侦听器watch

1、不支持缓存：数据变化就会触发响应的操作
2、支持异步：

<div id = 'app'>
			{{fullName}}
			<div @click="handleClick">点击</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					firstName:'Json',
					lastName:'Li',
					fullName:''
				},
				methods:{
					handleClick(){
						this.firstName = 'Nick'
					}
				},
				watch:{
					firstName(val){
						setTimeout(()=>{
							this.fullName = this.firstName + ' ' +  this.lastName
						},1000)
					}
				}
			})
			
		</script>