An error occurred when prop value in Vue was obtained asynchronously. Procedure

Repository 1: Lifecycle of parent and child components

p-beforeCreate
p-created
p-beforeMount
c-beforeCreate
c-created
c-beforeMount
c-mounted
p-mounted
Copy the code

Knowledge store 2: Parent component passes value to child component through prop, parent component changes value of prop, life cycle

p-beforeUpdate
c-beforeUpdate
c-updated
p-updated
Copy the code

Case 1:

If the parent component changes the value of prop, the child component responds to the change of the parent component immediately, regardless of whether the parent component changes the value of Prop. If the parent component does not change the value of Prop, the child component responds to the change immediately

A child component can always respond to changes made by its parent

Situation 2:

Mounted If the parent component changes the value of prop, the child component view does not respond. Only the initial value, whether asynchronous or not, can be displayed. If: Unmounted periodic function change data is passed

Representation: Child components can respond to parent changes, but the view does not change

Cause: Parent component changes prop, child component no longer executes Mounted periodic function

Solution: Watch Prop

Situation 3:

Mounted initializes a property in the parent component’s data object and passes the property to the child component as a prop

If the object is empty and the this. object is used. Property = property value, the new object is not responsive. When you look at Devtool, you can see that both parent and child components have new objects, but none of them are responsive (both are bubbles).

Prints the life cycle of the parent component and finds that only the updated and beforeUpdate of the parent component are printed

Cause: Objects are non-responsive

Solution: Add a new attribute to an object using Vue’s set method

Afterword.

I want to give the props a correct name for async. This is not an async problem. Async: I don’t know this problem