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)

相关推荐
wendycwb5 分钟前
前端城市地址根据最后一级倒推,获取各层级id的方法
前端·vue.js·typescript
终端鹿26 分钟前
Vue3 模板引用 (ref):操作 DOM 与子组件实例 从入门到精通
前端·javascript·vue.js
千寻girling41 分钟前
不知道 Java 全栈 + AI 编程有没有搞头 ?
前端·人工智能·后端
小码哥_常1 小时前
Android开发:精准捕获应用的前后台行踪
前端
蜡台1 小时前
Vue 打包优化
前端·javascript·vue.js·vite·vue-cli
木斯佳1 小时前
前端八股文面经大全:快手前端一面 (2026-03-29)·面经深度解析
前端·宏任务·原型链·闭包
皙然2 小时前
Redis配置文件(redis.conf)超详细详解
前端·redis·bootstrap
卷帘依旧2 小时前
JavaScript中this绑定问题详解
前端·javascript
dweizhao2 小时前
突发!Claude Code源码泄露了
前端
sunny_3 小时前
💥 Claude Code 源码泄露?我把这个最强 AI Coding Agent 的架构扒干净了
前端·agent·claude