ue3 computed watch 和 watchEffect 使用和区别

在 Vue 3 中,computed、watch 和 watchEffect 都是响应式系统的一部分,但它们各自有不同的用途和行为。

computed

用途:用于声明性地描述依赖数据和计算值的关系。computed 属性会根据它们的依赖进行缓存,并且只有当依赖发生变化时才会重新计算。

使用方式:通常用于模板中,可以直接访问计算属性的值,不需要 .value。

特点:

缓存结果,只有依赖变化时才重新计算。

可以定义 getter 和 setter,允许计算属性双向绑定。

通常用于组合多个响应式数据源,返回一个新的值。

watch

用途:用于观察和响应 Vue 实例上的数据变化,可以监听单个数据源或计算属性的变化。

使用方式:可以指定深度监听(deep),并且可以监听多个数据源。

特点:

可以监听响应式引用(ref)或响应式对象(reactive)的属性。

可以执行异步操作。

可以停止监听(通过返回一个清除函数)。

watchEffect

用途:用于自动追踪响应式引用、响应式对象或 Ref/ReactiveEffect 的变化,并在变化时执行副作用。

使用方式:在 setup 函数中使用,接受一个函数作为参数,该函数中的操作会被自动追踪。

特点:

不需要显式声明依赖,Vue 会自动追踪在函数中使用的所有响应式状态。

没有返回值,只执行副作用。

通常用于处理不需要返回值的响应式数据变化。

使用示例

cpp 复制代码
import { ref, computed, watch, watchEffect } from 'vue';

const count = ref(0);

// 使用 computed
const doubledCount = computed(() => count.value * 2);

// 使用 watch
watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});

// 使用 watchEffect
watchEffect(() => {
  console.log(`The doubled count is: ${doubledCount.value}`);
});

区别总结

依赖追踪:

computed 需要显式声明依赖,并且具有缓存机制。

watch 可以监听单个或多个数据源,可以是响应式引用或对象的属性。

watchEffect 自动追踪在回调函数中使用的所有响应式状态。

返回值:

computed 返回一个计算值,可以有 getter 和 setter。

watch 和 watchEffect 不返回值,watch 用于监听变化并执行回调,watchEffect 用于执行副作用。

使用场景:

computed 适用于需要返回值的计算属性。

watch 适用于需要响应特定数据变化的场景,尤其是当需要执行异步操作或需要停止监听时。

watchEffect 适用于处理不需要返回值的响应式数据变化,特别是当需要自动追踪多个响应式状态时。

相关推荐
专注前端30年14 分钟前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
Highcharts.js25 分钟前
选择合适的组合:如何打造数据可视化的“黄金组合”
javascript·信息可视化·highcharts·交互式图表开发
文火冰糖的硅基工坊1 小时前
[嵌入式系统-146]:五次工业革命对应的机器人形态的演进、主要功能的演进以及操作系统的演进
前端·网络·人工智能·嵌入式硬件·机器人
2401_837088501 小时前
ResponseEntity - Spring框架的“标准回复模板“
java·前端·spring
yaoganjili1 小时前
用 Tinymce 打造智能写作
前端
angelQ1 小时前
Vue 3 中 ref 获取 scrollHeight 属性为 undefined 问题定位
前端·javascript
Dontla1 小时前
(临时解决)Chrome调试避免跳入第三方源码(设置Blackbox Scripts、将目录添加到忽略列表、向忽略列表添加脚本)
前端·chrome
我的div丢了肿么办1 小时前
js函数声明和函数表达式的理解
前端·javascript·vue.js
AAA阿giao2 小时前
JavaScript 对象字面量与代理模式:用“胡巴送花”讲透面向对象与设计思想
javascript
云中雾丽2 小时前
React.forwardRef 实战代码示例
前端