How to solve the problem that the page does not change after using reactive assignment in vue3

Scenario reason

We need to use the server's data to render to the page in vue3. I use the responsive data generated by reactive properties, but the requested data is not rendered and displayed on the page after mounting.

Technology:vue3,element-ui-plus

1. Example

home.vue

By direct assignment, we can see that the data becomes ordinary data and is not responsive.

2. Solution

1. Use ref to store responsive data

The code is as follows:

It can be seen that the printed data is data hijacked by ref and is responsive.

2. Use objects to wrap the data to be changed in reactive

The code is as follows:

Use This way, the data is also responsive.

3. The for of loop pushes to the reactive data without destroying the data structure

The code is as follows:

The above is the detailed content of How to solve the problem that the page does not change after using reactive assignment in vue3. For more information, please follow other related articles on the PHP Chinese website!