Vue 3 中,computed 和 watch的区别

在 Vue 3 中,computed 和 watch 是两种用于处理响应式数据变化的重要工具,它们各自有不同的用途和特性。以下是它们的主要区别:

功能与用途

computed:

用途:主要用于创建基于其他响应式数据的计算属性。

实现:通过 getter 函数来返回计算后的值,并且会根据依赖的变化自动更新。

典型使用场景:

需要在模板中使用的计算属性,且这些属性依赖于多个数据源。

简化模板中的复杂表达式,提高代码的可读性和维护性。

利用缓存机制,在需要频繁读取计算结果的情况下提升性能。

watch:

用途:主要用于侦听某个数据的变化,并在数据变化时执行特定的副作用。

实现:通过一个回调函数来处理数据变化的逻辑。

典型使用场景:

需要在数据变化时执行异步操作,如 API 请求。

需要在数据变化时执行复杂逻辑或条件判断。

需要在数据变化时多次触发某个操作,但需要注意可能的性能问题。

性能表现

computed:

具有缓存特性,即只有在依赖的数据发生变化时才会重新计算,否则会直接返回缓存的结果。

因此,在需要频繁读取计算结果的情况下,computed 在性能上通常优于 watch。

watch:

会在数据变化时触发,可能会多次触发回调函数,特别是当数据频繁变化时。

如果回调函数包含复杂逻辑,可能会引起性能问题。

使用方式

computed:

在组合式 API 中,通过 computed 函数创建计算属性。

计算属性默认是只读的,但也可以定义一个可写的计算属性,允许通过 set 函数改变其值。

watch:

在组合式 API 中,通过 watch 函数创建侦听器。

可以精确指定要侦听的数据源,并在这些数据源变化时执行回调函数。

watch 返回一个停止侦听的函数,可以在需要时停止侦听。

示例对比

computed 示例:

javascript

javascript 复制代码
import { ref, computed } from 'vue';
 
const items = ref([10, 20, 30, 40]);
const total = computed(() => items.value.reduce((sum, item) => sum + item, 0));
 
console.log(total.value); // 输出: 100
watch 示例:
javascript
import { ref, watch } from 'vue';
 
const query = ref('');
 
watch(query, (newQuery, oldQuery) => {
  // 执行异步操作,如 API 请求
  fetch(`https://api.example.com/search?q=${newQuery}`)
    .then(response => response.json())
    .then(data => {
      // 更新数据
    });
});

总结

选择工具:根据实际需求选择合适的工具。如果需要侦听数据变化并执行副作用,使用 watch;如果需要计算派生状态并在模板中展示,使用 computed。

优化性能:在需要频繁读取计算结果的情况下,优先使用 computed 属性,以利用其缓存机制提升性能。

简化代码:通过使用 computed 属性,可以简化模板中的复杂表达式,提高代码的可读性和维护性。

综上所述,computed 和 watch 在 Vue 3 中各有其独特的用途和优势,开发应根据具体场景和需求选择合适的工具来优化代码性能和可读性。

相关推荐
孤水寒月2 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀3 小时前
html初学者第一天
前端·html
脑袋大大的4 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络5 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way5 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家6 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689976 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽7 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头7 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github