浅谈Vue中computed和watch的区别

最新推荐文章于 2024-08-16 09:31:46 发布

千云培风

最新推荐文章于 2024-08-16 09:31:46 发布

阅读量219

点赞数

分类专栏： Javascript Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/AmourZJ1314/article/details/129026806

版权

Vue中computed和watch都有其特定用途。computed属性是基于缓存的计算属性，依赖其他属性并仅在依赖变化时更新。watch更像命令式回调，适合在数据变化时执行复杂操作。例如，computed常用于计算属性，如面积计算，而watch可用于根据offTime值改变其他多个数据，如开关灯等操作。

摘要由CSDN通过智能技术生成

Vue开发过程中经常会使用到"computed"和“watch”。两者有很多相似的地方，但在使用的过程中，又各有不同。
下面我就来简单区分一下。

1.computed:

首先来说一下，什么是computed?
文档里说，computed是计算属性，基于缓存更新，当与它关联的依赖属性发生变化时，它才会更新。简而言之，computed里的属性，是依赖于其他属性存在或变化的。

举例1：

通过长*宽计算面积，即：height * width = square;

<template>
	<div>
		长：<input v-model="length"/>
		宽：<input v-model="width"/>
		面积：{
   {
   square}}
	</div>
</template>
<script>
export default {
   
	data:{
   
	return{
   
		length: 0,
		width: