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现监听属性变化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天小编就为大家分享一篇vue请求服务器数据后绑定不上的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
对于vue下的双向绑定功能，个人理解为在处理逻辑的过程中缓存了大量的node对象，node对象可以是html标签、文本内容。既然选择了缓存这些对象，那么在用的过程中哪里需要改变就把node拿出来，进行标签属性的变更或者文本内容的修改。本文主要讲了如何实现双向绑定2021-06-06
这篇文章主要介绍了vue的面包屑导航组件，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
这篇文章主要介绍了解决mpvue + vuex 开发微信小程序 vuex辅助函数mapState、mapGetters不可用问题,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了vue 路由嵌套高亮问题的解决方法，主路由通过v-for循环出来，次路由通过url拼接的方式导航到子路由页面，具体实现代码大家参考下本文2018-05-05
vue-resource 拦截器interceptors使用详解
这篇文章主要介绍了vue-resource 拦截器interceptors使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
Echarts，它是一个与框架无关的 JS 图表库，但是它基于Js，这样很多框架都能使用它，例如Vue，估计IONIC也能用，因为我的习惯，每次新尝试做一个功能的时候，总要新创建个小项目，做做Demo2022-09-09
vue响应式系统之observe、watcher、dep的源码解析
这篇文章主要介绍了vue响应式系统之observe、watcher、dep的源码解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
这篇文章主要给大家介绍了关于vue3组件TS类型声明的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了Vuex 进阶之模块化组织详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
最新评论