“This is the third day of my participation in the August More Text Challenge.

scenario

In project development, the front end must first write the static page after the static page is written and then the data can be connected to the back end. [Happy] But when we connect the interface, we will find that the fields returned by the back end may be different from what the front end wrote on the page. This is when the interesting thing happensCopy the code

In this case the data will not be updated

<div> {{objData}} < button@click ="submitHander" </button> </div> <script> import {reactive} from 'vue' export Default {setup () {let objData=reactive({name:' reactive ', age:31, Function submitHander(){objData={name:' nv', age:31, sex:' nv'}} return {objData, submitHander } } } </script>Copy the code

Occurring phenomenon

As you can see, when you click the button, the data doesn't change. Why doesn't the data change? ObjData ={name:' linyang 1', age:31, sex:' female nv'} I reassigned it. If you assign to the entire object, Vue3.0 cannot catch up with the newCopy the code

So we can keep up with the new

<template> <div> {{objData}} < button@click ="submitHander"> </button> </div> </template> <script> import {reactive } from 'vue' export default {setup () {let objData=reactive({name:' reactive ', age:31, Sex :' female '}) function submitHander(){objdata.name =' linyang1 '; objData.name='31'; ObjData. Name = 'female nv; } return { objData, submitHander } } } </script>Copy the code

Up there with the new problems

How to have a lot of values. If I need to go with the new, that is not I want to participate in the assignment one by one, so it is not to kill me?? There is a way to solve it: how to deal with it? Actually, reactive is being used in the wrong way. It was a mistake. I lied to youCopy the code

How does Reactive keep up with new correctly

<template> <div> {{objdata.arr}} < button@click ="submitHander"> </button> </div> </template> <script> import { Reactive} from 'vue' export default {setup () {let objData=reactive({// reactive) Age :31, sex:' female '}]}); Function submitHander(){objdata. arr=[{name:' s ', age:29, sex:' s'}]} return {objData, submitHander } } } </script>Copy the code

Reactive uses posture correctly

Let objData=reactive({name:' linreactive ', age:31, sex:' female '}) Reactive functions pass parameters to objects. Reactive functions pass parameters to objects. The problem is that we are not very friendly with new data and we may have reactive data in several places during the actual development process, so we just need to create a reactive(let objData=reactive({// the data that is used by a certain area)) OneObj: [{name: Lin Yang, age: 31, sex: 'female'}], / / another two area used data: {name: 'sound', age: 123}}); Let oneObj=reactive({name:' resin ', age:31, sex:' resin '}) let two=reactive({name:' resin ', age:31})Copy the code