vue 监听多个属性，但是只执行一次方法

最新推荐文章于 2024-08-18 19:57:55 发布

八分钟de温暖

最新推荐文章于 2024-08-18 19:57:55 发布

阅读量1.8k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_40466351/article/details/126152883

版权

本文探讨如何在Vue应用中使用单个watch处理器监控多个属性（如propertyA和propertyB）的变化，并演示了如何在值更新时进行相应的操作。通过实例展示了如何结合 computed 和 watch 功能来简化状态管理。

摘要由CSDN通过智能技术生成

vue js watch multiple properties with single handler

  export default {
      // ...
      computed: {
        propertyAAndPropertyB() {
          return `${this.propertyA}|${this.propertyB}`;
        },
      },
      watch: {
        propertyAAndPropertyB(newVal, oldVal) {
          const [oldPropertyA, oldProvertyB] = oldVal.split('|');
          const [newPropertyA, newProvertyB] = newVal.split('|');
          // doSomething
        },
      },
    }

或者

new Vue({
  el: '#app',
  data: {
    name: 'Alice',
    surname: 'Smith',
    fullName: '' // IRL you would use a computed for this, I'm updating it using a watch just to demo how it'd be used
  },
  mounted() {
    this.$watch(vm => [vm.name, vm.surname], val => {
      
      this.fullName = this.name + ' ' + this.surname;
      
    }, {
      immediate: true, // run immediately
      deep: true // detects changes inside objects. not needed here, but maybe in other cases
    }) 
  }
});