Vue利用computed配合watch实现监听多个属性的变化
更新时间：2023年10月24日 09:12:56 作者：JackieDYH
这篇文章主要给大家介绍了在Vue中巧用computed配合watch实现监听多个属性的变化的方法,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下
但需要同时监听多个值的变化时，原始操作是通过去对每个属性进行监听，
props: ['id', 'data', 'name', 'period', 'unit'],
因为watch可以监听计算属性computed，可以通过computed把所有要监听的数据组成对象，再去监听该对象需要监听的数据逐个写，这样重复的代码很多，不推荐这里想要实现的功能是，数据改变了，比对name1和name2是否一致，显示巧用computed更胜一筹
原始方法
watch: {
data: {
handler() {
if (this.chart) {
this.setOption();
}
},
deep: true,
immediate: false
},
period: {
handler() {
if (this.chart) {
this.setOption();
}
},
deep: true,
immediate: false
}
}computed
computed: {
chartData() {
const {data, name, period, unit} = this
return{
data, name, period, unit
}
}
},
watch: {
chartData: {
handler(newVal, oldVal) {
if (this.chart) {
this.setOption();
}
},
deep: true,
immediate: false
}
},到此这篇关于Vue利用computed配合watch实现监听多个属性的变化的文章就介绍到这了,更多相关Vue computed现监听属性变化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue3使用element-plus中el-table组件报错关键字'emitsOptions'与&
这篇文章主要给大家介绍了关于vue3使用element-plus中el-table组件报错关键字'emitsOptions'与'insertBefore'的相关资料,文中将解决方法介绍的非常详细,需要的朋友可以参考下2022-10-10
vue3组合API中setup、 ref、reactive的使用大全
本文给大家介绍vue3组合API中setup、 ref、reactive的用法，初步了解reactive的使用及具体用法，通过示例代码给大家介绍的非常详细，需要的朋友参考下吧2021-06-06
下面小编就为大家分享一篇vue中改变选中当前项的显示隐藏或者状态的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
echarts uniapp没有dom renderjs解决uniapp无法获取Dom问题
文章主要介绍了uni-app在app和h5端引入echarts的方法及注意事项,以及通过renderjs技术来解决echarts在跨端和动画性能上的问题,并给出使用总结2026-05-05
这篇文章主要介绍了vue使用luckyexcel实现在线表格及导出导入方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
vue中this.$http.post()跨域和请求参数丢失的解决
这篇文章主要介绍了vue中this.$http.post()跨域和请求参数丢失的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
在开发Vue应用时,我们经常需要在多个组件中复用一些通用的函数或方法,这些函数可能是我们自己编写的工具函数,也可能是从第三方库中导入的,下面我们就来看看如何正确引用和使用外部方法吧2024-01-01
这篇文章主要为大家详细介绍了如何利用vue实现拍照或录像的功能,文中的示例代码讲解详细,具有一定的参考价值,感兴趣的小伙伴可以跟随小编一起学习一下2023-11-11
这篇文章主要介绍了Vue组件公用方法提取mixin实现，多个组件共用一个方法时可以用 mixin 抽取到一个js文件中，作为共用方法，下面一起进入文章了解更多详细内容吧2022-03-03
下面小编就为大家带来一篇浅谈mint-ui loadmore组件注意的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
最新评论