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 适用于处理不需要返回值的响应式数据变化,特别是当需要自动追踪多个响应式状态时。

相关推荐
IT_陈寒2 分钟前
JavaScript 性能优化的 7 个致命陷阱:我从 P5 到 P8 的核心突破都在这里!
前端·人工智能·后端
艾小码21 分钟前
告别加班!这些数组操作技巧让前端开发效率翻倍
前端·javascript
Rhys..1 小时前
ES6是什么
前端·javascript·es6
Jammingpro2 小时前
【Vue专题】前端JS基础Part1(含模版字符串、解构赋值、变量常量与对象)
前端·javascript·vue.js
jiangzhihao05156 小时前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
软件技术NINI8 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front9 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie10 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀10 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻10 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js