Vue:Computed和watch

文章目录

Vue.js中的computed和watch是两种处理响应式数据的不同方式,它们分别服务于不同的目的:

Computed Properties(计算属性)

用途:

计算属性是用来根据其他响应式依赖(如data、props等)动态计算出一个新的值的属性。

当其依赖的任何响应式数据发生变化时,Vue会自动重新计算该属性的值,并更新相关联的DOM。

特点:

Computed属性的结果会被缓存 ,只有当它的依赖关系改变时才会重新计算。

可以定义getter函数(默认)获取计算结果,并在必要时定义setter函数修改相关依赖。

它们最适合用来封装一些复杂的逻辑,这些逻辑产生的值依赖于其他多个数据源。

缓存

Computed属性支持缓存机制。当计算属性所依赖的数据没有发生变化时,它会复用上次计算的结果,不会重新执行计算函数。

当任何一个影响到计算属性结果的响应式依赖项发生变化时,Vue会自动触发重新计算,并更新缓存。

异步

Computed属性不支持异步操作。如果在计算属性的getter函数中执行异步操作,Vue无法跟踪其依赖关系,也就无法正确地更新视图。

若要在数据变化后执行异步任务,通常不推荐在computed中实现。

Watchers(侦听器)

用途:

watch是更显式的观察者,用于监听特定数据的变化并执行相应的回调函数。

你可以指定要观察的数据路径,以及在数据变化前后执行哪些操作。

特点:

watch可以深度观察对象内部的变化(通过deep: true选项)。

监听函数不仅可以监听单个数据属性,还可以监听复杂表达式或者整个对象。

通常用于执行副作用操作,例如:在数据变化后发送API请求、更新DOM以外的地方、或者是手动触发某些业务逻辑。

缓存

Watch不具备缓存机制。每当监听的属性发生变化时,无论变化前后值是否一样,都会立即执行监听函数。

异步

Watch支持异步函数。在watch的回调函数中,可以直接执行异步操作,例如使用async/await或者.then()链式调用API等。

如果需要在数据变化后执行异步任务,并且任务完成后还需要进一步更新数据或视图,watch是合适的选择。

适用场景举例

Computed:

适用于基于已有响应式属性简单计算得出新值的场景,如计算全名、过滤数组等。

Watch:

适用于需要在数据变化后进行复杂处理,如触发异步API请求、进行额外的DOM操作或业务逻辑处理等。

相关推荐
yinke小琪几秒前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
枣把儿4 分钟前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
望获linux6 分钟前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
爱编程的喵7 分钟前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
喜欢吃豆10 分钟前
深入企业内部的MCP知识(三):FastMCP工具转换(Tool Transformation)全解析:从适配到增强的工具进化指南
java·前端·人工智能·大模型·github·mcp
豆苗学前端13 分钟前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试
不见_13 分钟前
不想再写周报了?来看看这个吧!
前端·命令行
yinke小琪15 分钟前
JavaScript 事件冒泡与事件捕获
前端·javascript
pany17 分钟前
写代码的节奏,正在被 AI 改写
前端·人工智能·aigc
liliangrong77720 分钟前
ES2025新特性详解
前端