Subscribe on changes!

Prop order effects withDefaults factory function

avatar
Oct 24th 2022

Vue version

3.2.41

Link to minimal reproduction

https://sfc.vuejs.org/#eNrNUr1uwjAQfpWTl4BUYpXRDaCqfYBuXbwYcMAosS37AkOUd+/ZARTazlUX636/++479+zV+/LcaSZYFXfBeISosfNraU3rXUB4c61/hjq4FoqSZy81FC8PFcuHiuWtouIjKMGRg7r1jUJNHkC1N+dskDnOELVzK8kwdFoy4DkpMSeXvyYrPmJU/I7MntjIatEqX56is7RZn5GuiSiZgBxJMeKZfMmOiD4KzmO9S+RPsXThwMkqQ2fRtLrUsV1sg7tEHQhYsgQxSDvQyLsqScbJlsT+uLwu2fewVQEGaknMc3xCPAs0vQA0yh7SxjQqXcOiDrXaafgIzsdxA9JEwNa5RitLakOasBEQMRh7oECeJe3F4PFd16prMM72ujZWZ5Aqv+vZ/GmEo24BM2MN5sQcVuubUoEoBQv3XEmjYQPFp4qQblKAGJ1aNVEXN23m0z9wFSp/jj8W6psuP5T7Z0INX/BUNps=

Steps to reproduce

Issue appears on screen on load. There are two identical components except the order of the foo and bar props in the Props interface are different. Both are using withDefault with a factory function for setting the value of bar based on the value of foo. Both components have foo passed as true and both are using identical factory functions to set the value of bar. You can see each component sets bar to different values when they should be the same.

In Comp1, foo is defined before bar is. When the factory function for bar is called, the value of foo has been set and can be used to set the value of bar.

In Comp2, bar is defined before foo is. When the factory function for bar is called, the value of foo has not been set and cannot be used to set the value of bar.

What is expected?

The order of props in the interface should not affect using prop values in withDefault factory function.

What is actually happening?

Order of props affects using prop values in withDefault factory function.

System Info

No response

Any additional comments?

No response

avatar
Oct 24th 2022

This is because the order of 'props' compiled from' interfaces' in different orders is also different. If you put 'foo' on it, you will first process the 'foo' attribute and put it into 'props', and then process' bar'. At this time, 'foo' attribute can be read from 'props', so' true 'is displayed. If 'foo' is placed below, 'foo' has not been placed in 'props' when' bar 'is initialized. So there are two results. image image