Network request data:

Child components:

If the parent component is mounted, the parent component is rendered at the same time as the child component. The mounted method is executed before the parent component is retrieved. When you retrieve data, you cannot execute mounted again.Copy the code

Watch

Num (newVal, oldVal) {watch: {num(newVal, oldVal) {watch: {num(newVal, oldVal) { Old value, previous value console.log('oldVal:',oldVal) console.log('newVal:',newVal)}}Copy the code

Immediate (Triggered when the page is entered)

watch: { num: Handler (newVal, oldVal) {console.log('oldVal:', oldVal) console.log('newVal:', newVal)}, Immediate: true}}Copy the code

Deep (deep listening)

Object and array are reference types. The reference type variable stores the address. The address remains unchanged, so watch will not be triggered. When we need to do deep listening, we need to add a property deep, which is true

Watch: {// The first method is to listen on the entire object and execute handler for each change in the property value. Handler (newVal, oldVal) {console.log('oldVal:', oldVal) console.log('newVal:', newVal)}, Immediate: true, // deep: True}, // Second way: If the value of the monitored property changes, the function will be executed. 'food.name'(newVal, oldVal) {console.log('oldVal:', oldVal) // ice cream console.log('newVal:', // lollipop}}Copy the code

Solution: Instead of adding watch to the child component, add watch to the parent component to assign the latest value of the asynchronous request back to the empty array of white variables in the original data

InterestData (newVal, oldVal) {interestData(newVal, oldVal) {interestData(newVal, oldVal) {interestData(newVal, oldVal) {interestData(newVal, oldVal) {interestData(newVal, oldVal) {interestData(newVal, oldVal) { Old value, previous value console.log('oldVal:',oldVal) console.log('newVal:',newVal) this.interestdata = newVal}}Copy the code