vue watch怎样同时监听两个值的变化并执行方法？

最新推荐文章于 2025-05-30 09:08:25 发布

原创最新推荐文章于 2025-05-30 09:08:25 发布 · 1.4w 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#vue #watch #同时监听两个值的变化

VUE 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍如何在Vue.js框架中利用computed属性和watch监听器实现数据变化的响应式更新。通过具体示例，展示了如何定义一个changeData对象，用以在数据变化时触发图表的重新构建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用computed定义一个changeData对象吧，然后再去watch changeData

computed: {
      changeData() {
        const { index, columName,columData} = this
        return {
          index,
          columName,
          columData,
        }
      }
    },
    watch: {
      changeData: {
        handler: function (newval, oldval) {
          this.index = newval.index;
          this.columName = newval.columName;
          this.columData = newval.columData;
          let length = this.columName.length;
          let end = 700/length-1; // 横坐标展示7类
          let show = false;
          if(length >7){
            show = true;
          }
          this.buildChart(this.columLabel,this.columName,this.columData,show,end);
        },
        deep: true
      }
    }