Vue2 watch监听不到props的变化的原因和解决方法

2023-12-12 04:39:28

问题

在Vue2中，使用watch监听props的变化时，可能会遇到watch不触发监听的情况。这可能是由于以下两个原因造成的：

父组件传参时，props被转换成JSON。
watch未设置深层监听参数。

解决方法

1. 将props转换成JSON

当父组件向子组件传递props时，props会被转换成JSON。这会导致watch无法监听props的变化。为了解决这个问题，可以在父组件中将props转换成JSON，然后在子组件中使用JSON.parse()方法将props解析成对象。

// 父组件
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  methods: {
    sendMessage() {
      this.$emit('message', JSON.stringify(this.message))
    }
  }
}

// 子组件
export default {
  props: ['message'],
  watch: {
    message: {
      handler(newVal, oldVal) {
        console.log('Message changed from', oldVal, 'to', newVal)
      },
      deep: true
    }
  },
  methods: {
    receiveMessage(message) {
      this.message = JSON.parse(message)
    }
  }
}

2. 设置深层监听参数

watch的默认监听模式是浅层监听，即只监听props的第一层变化。如果props是一个对象，那么watch无法监听对象内部属性的变化。为了解决这个问题，需要在watch中设置深层监听参数，即deep: true。

export default {
  props: ['message'],
  watch: {
    message: {
      handler(newVal, oldVal) {
        console.log('Message changed from', oldVal, 'to', newVal)
      },
      deep: true
    }
  }
}