The recent project development can be regarded as a formal contact with vue3, and many pitfalls have been encountered in the process of use. For example, the parent component passes values to the child components, but the child components cannot get the value in onMounted, and the reactive array is used to assign values. etc.
1. How to solve the problem that the value cannot be obtained when the initialization is passed from parent to child.
First, analyze the reason, because the DOM of the child component is rendered first, and then the parent component is rendered, but when the parent component gets the value, the child component has already been rendered, which leads to the fact that the child component cannot get the value during initialization, which can be passed and judged first Whether the data is obtained, and then render the child component to solve this problem.
2. How to solve the problem of using reactive to define an array, and the assignment cannot be assigned.
1. Method 1: You can use ref to define
2. Method 2: You can pass let params = reactive({
data:[]
})
3. Method 3: through let appData = [...data]
The reason why the value cannot be assigned is that the Object.assign() used by reactive performs a shallow copy of the data, which makes the data unable to be assigned a value.