脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue computed实现监听属性变化

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现监听属性变化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论