Using watch to observe a prop in a vue custom element, the other props accessed in the listener are the old values. #12619
Description
Vue version
3.5.11
Link to minimal reproduction
Steps to reproduce
- Add custom components in the
<template>of the parent component with different prop orders.
<template>
<test-el :prop1="value1" :prop2="value2"></test-el>
<test-el :prop2="value2" :prop1="value1"></test-el>
</template>- Use
watchin the child component to monitor changes in a prop and record the value of another prop.
watch: {
prop1: {
handler(val) {
console.log('prop1 changed, prop2 is ', this.prop2)
this.tempProp2 = this.prop2
},
},
prop2: {
handler(val) {
console.log('prop2 changed, prop1 is', this.prop1)
this.tempProp1 = this.prop1
},
},
},- Update the prop value in the parent component.
const value1 = ref('old value1')
const value2 = ref('old value2')
setTimeout(() => {
value1.value = 'new value1'
value2.value = 'new value2'
}, 0)- Observe the results.
What is expected?
The watch listener in a custom element can access the latest prop values.
What is actually happening?
For a custom element, when using watch to observe a prop, accessing the values of other props defined later in the order within the listener will return their old values.
System Info
No response
Any additional comments?
No response