vue 中 computed 和 watch 的区别

在Vue中,computed和watch都是用于监听数据的变化,并且根据变化做出相应的反应。

computed是一个计算属性,它会根据依赖的数据的变化自动计算得出一个新的值,并且具有缓存的特性。当依赖的数据发生变化时,computed属性会重新计算,并且只有在依赖的数据发生变化时才会重新计算,否则会直接返回之前计算的结果。computed属性适用于依赖较少、计算量较大的情况。

以下是一个使用computed的例子:

javascript 复制代码
new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName;
    }
  }
})

在上面的例子中,fullName是一个computed属性,它依赖于firstName和lastName这两个data属性。当firstName或者lastName发生变化时,fullName会自动重新计算得出新的结果。

watch则是一个侦听器,它会监听指定的数据的变化,并且在数据发生变化时执行相应的回调函数。watch适用于需要在数据变化时执行异步或者复杂的操作的情况。

以下是一个使用watch的例子:

javascript 复制代码
new Vue({
  data: {
    name: 'John Doe'
  },
  watch: {
    name: function (newVal, oldVal) {
      console.log('name changed from ' + oldVal + ' to ' + newVal);
    }
  }
})

在上面的例子中,watch会监听name属性的变化。当name发生变化时,watch会执行相应的回调函数,打印出变化前后的值。

总结一下,computed是根据依赖的数据自动计算得出一个新的值,并且具有缓存的特性;而watch则是监听指定的数据的变化,并在数据发生变化时执行相应的操作。

相关推荐
张晓~183399481211 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
爱喝水的小周1 小时前
AJAX vs axios vs fetch
前端·javascript·ajax
Jinxiansen02111 小时前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
几道之旅1 小时前
介绍electron
前端·javascript·electron
周胡杰1 小时前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
31535669131 小时前
ClipReader:一个剪贴板英语单词阅读器
前端·后端
玲小珑1 小时前
Next.js 教程系列(十一)数据缓存策略与 Next.js 运行时
前端·next.js
qiyue771 小时前
AI编程专栏(三)- 实战无手写代码,Monorepo结构框架开发
前端·ai编程
轻语呢喃2 小时前
React智能前端:从零开始的识图学单词项目(一)
javascript·react.js·aigc
断竿散人2 小时前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架