Vue 里的 computed 和 watch 的区别 ?

一. 相同点:

computed和watch都是观察页面的数据变化的。

二. 不同点

计算属性computed(一对多,一对一)

计算属性将会混入到vue的实例当中,所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

1、监控自定义的变量,这个变量不可以和data、props里面的变量重复;
2、computed属性的属性值是函数默认走get方法(必须有返回值),属性都有一个get和set方法;
3、支持缓存,只有所依赖的数据发生变化才会重新计算,否则会取缓存中的数据;
4、不支持异步,在computed里面操作异步无效;

<templete>
	<div>{{message}}</div>
</templete>
<script>
data(){
	return {
		name:'muma',
		tyPE:'man'
	}
},
computed:{
	//仅读取getter
	message:function(){
		return `${this.muma}是${this.man}孩子!!!`
	},
	// 读取getter和设置setter
	msg:{
	  get: function () {
        return `${this.muma}是${this.man}`
      },
      //在给msg重新赋值的时候会调用setter,例如this.msg = '你是谁'。
      set: function (newValue) {//newValue是msg新的值
      	let names = newValue.split('是');
        this.muma = names[0];
        this.man = names[1];
      }
	}
}
</script>

监听属性watch(多对一)

1、监听data、props里面数据的变化;
2、不支持缓存,每次都会重新计算;
3、支持异步,监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;

<templete>
	<div>{{message}}</div>
</templete>
<script>
data(){
	return {
		name:'muma',
		type:'boy',
		func:'1',
		obj:{
			label:'aa'
		}
	}
},
watch:{
	//name变了修改type	
	name:function(new, old){
		this.type = 'girl';
	},
	'func':'funcChange',
	'obj.label':{
		handler(new, old){
			this.type = 'boy';
		},
		immediate:true, //控制是否在第一次渲染是执行这个函数
		deep:true //控制是否要看这个对象里面的属性变化
	}
},
methods:{
	funcChange(){
		console.log('......')
	}
}
</script>

三.  总结

computed
1、computed是计算属性,也就是依赖某个值或者props通过计算得来得数据;
2、 computed的值是在getter执行之后进行缓存的,只有在它依赖的数据发生变化,会重新调用getter来计算;
3、 不支持异步,当computed内有异步操作时无效,无法监听数据的变化;

watch
1、watch是监听器,可以监听某一个数据,然后执行相应的操作;
2、不支持缓存,数据变直接会触发相应的操作;
3、监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
4、支持异步操作;

三.  实际运用场景

  • 如果一个数据需要经过复杂计算就用 computed
  • 如果一个数据需要被监听并且对数据做一些操作就用 watch
  • 当多个属性影响一个属性的时候,建议用computed,比如:

    fullName(){
      return this.firstName + this.secondName
    }
    

    fullName是由firstName和secondName影响的,这种情况就适合computed;

  •  

    当一个值发生变化之后,会引起一系列的操作,这种情况就适合用watch;

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:共享博客 » Vue 里的 computed 和 watch 的区别 ?

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活