Computed 和 Watch 使用与区别

举报
SHQ5785 发表于 2024/04/16 09:29:43 2024/04/16
【摘要】 一、Computed可以关联多个实时计算的对象,当这些对象中的其中一个改变时都会触发这个属性,具有缓存能力,所以只有当数据再次改变时才会重新渲染,否则就会直接拿取缓存中的数据。例如,当我们想让div元素的背景色和文字颜色一致时,我们就可以使用computed属性。此时computed只会在初次渲染和文字颜色改变的情况下才会触发。其他情况下直接从缓存中读取。<template> <div> ...

一、Computed

可以关联多个实时计算的对象,当这些对象中的其中一个改变时都会触发这个属性,具有缓存能力,所以只有当数据再次改变时才会重新渲染,否则就会直接拿取缓存中的数据。

例如,当我们想让div元素的背景色和文字颜色一致时,我们就可以使用computed属性。此时computed只会在初次渲染和文字颜色改变的情况下才会触发。其他情况下直接从缓存中读取。

<template>
	<div>
		<div style="width:200px" :style="styleData">颜色改变</div>
		<button @click="change"></button>
	</div>
</template>

<script>
	export default {
		name: "button",
		data() {
			return {
				color: 'red' 
			}
		},
		computed: {
			styleData: funtion () {
				return {
					backgroundColor: this.color
				}
			}
		}
	}
</script>

二、Watch

当你需要在数据变化响应时,执行异步操作,或高性能消耗的操作,自定义watch方式就会很有帮助。

  1. 仅仅是数据发生改变的时候会侦听到;
  2. 只是会检测到你写在watch里的那些属性,没写的就不会触发。

三、updated

  1. 执行到它的时候时候是数据发生变化且界面更新完毕;
  2. 不能监听到路由数据(例如网址中的参数);
  3. 所有的数据发生变化都会调用(消耗性能);
  4. 每次触发的代码都是同一个。

四、拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。