Vue中computed和watch的区别

1.computed:

计算属性注重在一个值变化时改变另一个值,在依赖发生变化时或vue初始化时会执行,执行时使用的是依赖项的newValue而非oldValue,必须return一个值(给到计算属性),无法异步执行,

必须是同步方法,无法用于更改dom(更改dom应该是异步方法)
2.watch:

1)注重对data或computed中的属性的监听,相当于给属性配置一个onchange事件,在监听的属性值发生变化时执行,

默认vue初始化时不会执行(除非加上immediate:true,此时oldValue传入的是undefined).

回调会传入oldValue和newValue

2)深度监听:如果监听的属性为一个包含多个子属性的对象时,如果需要在子属性发生变化时触发watch监听事件,则需要显式的配置deep:true

3)可以进行http请求/更改dom任何同步异步操作.

参考文档:一文弄清楚Vue中的computed与watch的区别 - 知乎 (zhihu.com)

相关推荐
你挚爱的强哥17 分钟前
SCSS上传图片占位区域样式
前端·css·scss
奶球不是球17 分钟前
css新特性
前端·css
Nicholas6819 分钟前
flutter滚动视图之Viewport、RenderViewport源码解析(六)
前端
无羡仙29 分钟前
React 状态更新:如何避免为嵌套数据写一长串 ...?
前端·react.js
TimelessHaze1 小时前
🔥 一文掌握 JavaScript 数组方法(2025 全面指南):分类解析 × 业务场景 × 易错点
前端·javascript·trae
jvxiao1 小时前
搭建个人博客系列--(4) 利用Github Actions自动构建博客
前端
袁煦丞2 小时前
SimpleMindMap私有部署团队脑力风暴:cpolar内网穿透实验室第401个成功挑战
前端·程序员·远程工作
li理2 小时前
鸿蒙 Next 布局开发实战:6 大核心布局组件全解析
前端
EndingCoder2 小时前
React 19 与 Next.js:利用最新 React 功能
前端·javascript·后端·react.js·前端框架·全栈·next.js
li理2 小时前
鸿蒙 Next 布局大师课:从像素级控制到多端适配的实战指南
前端