在vue中,computed 和 watch 的区别和运用的场景?

简介: 在vue中,computed 和 watch 的区别和运用的场景?

在 Vue 中,computedwatch都是用于观察和响应数据变化的属性,但它们的工作方式和运用场景有所不同。

  • computed:是一个计算属性,依赖于其他属性,并且computed的值有缓存。只有它依赖的属性值(响应式依赖)发生变化,下一次获取computed的值时才会重新计算computed的值。
  • watch:更多的是【观察】的作用,类似于某些数据的监听回调,每当监听的数据发生变化时,都会执行回调进行后续操作。

运用场景:

  • computed:当我们要进行数值计算,并且依赖于其他数据时,这时应该使用computed,因为利用computed的缓存特性,可以避免每次获取值时都重复计算。
  • watch:当我们在数据发生变化时执行异步或开销较大的操作时,应该使用watch,使用watch选项允许我们执行一步操作(访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些是computed(计算属性)无法实现的。
相关文章
|
5天前
|
JavaScript
vue组件中的插槽
本文介绍了Vue中组件的插槽使用,包括单个插槽和多个具名插槽的定义及在父组件中的使用方法,展示了如何通过插槽将父组件的内容插入到子组件的指定位置。
|
3天前
|
JavaScript
vue消息订阅与发布
vue消息订阅与发布
|
4天前
|
JavaScript 前端开发 IDE
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
|
4天前
|
JavaScript 前端开发 API
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
|
2天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
11 4
|
2天前
|
JavaScript
vue尚品汇商城项目-day07【51.路由懒加载】
vue尚品汇商城项目-day07【51.路由懒加载】
12 4
|
4天前
|
JavaScript 前端开发
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
|
2天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
8 2
|
4天前
|
JavaScript 前端开发 API
Vue学习笔记7:使用v-for指令渲染列表
Vue学习笔记7:使用v-for指令渲染列表
|
4天前
|
JavaScript
vue 函数化组件
vue 函数化组件
下一篇
无影云桌面