Vue responds to data changes through watch

Code in Vue

it was like this

<div class="right-tip" >{{info.roomTypeCode}}</div>

But because the parent component assignment is passed to the child component. As a result, the page needs to be refreshed for the first time to perform dynamic rendering of data.

So there is the following modified code that uses ref

ref has three uses:

　　1. ref is added to ordinary elements, and the dom element is obtained with this.ref.name

2. The ref is added to the sub-component, and the component instance　　is obtained with this.ref.name , and all the methods of the component can be used .

　　3. How to use v-for and ref to get a set of arrays or dom nodes

See this blog for details

https://www.cnblogs.com/goloving/p/9404099.html

<div class="right-tip" ref="roomTypeCode"></div>

Use watch to respond to data changes

watch: {
    info: {
        handler(newVal, oldVal) {
            this.$refs.roomTypeCode.innerHTML = newVal.roomTypeCode ? newVal.roomTypeCode : '';
        },
        deep: true,
        immediate: true
    }
}

info is a property

export default {
  name: 'FillInfo',
  props: ['info'],
  components: {
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [Field.name]: Field,
    [Stepper.name]: Stepper,
    PhoneInput
  },
  data () {
    return {
      center: true
    }
  },
  methods: {
    plus () {
      this.$emit('plus')
    },
    change (val) {
      this.$emit('change', val)
    },
    minus () {
      this.$emit('minus')
    }
  },
    watch: {
        info: {
            handler(newVal, oldVal) {
                this.$refs.roomTypeCode.innerHTML = newVal.roomTypeCode ? newVal.roomTypeCode : '';
            },
            deep: true,
            immediate: true
        }
    }
}

immediate和handler

There is a feature when using watch in this way, that is, when the value is bound for the first time, the monitoring function will not be executed, and it will only be executed when the value changes. If we need to also execute the function when the value is initially bound, we need to use the immediate property.

For example, when the parent component dynamically transfers values ​​to the child component, when the child component props obtains the default value from the parent component for the first time, the function also needs to be executed. In this case, immediate needs to be set to true.

The monitored data is written in object form, including handler method and immediate. The function we wrote before is actually writing this handler method;

immediate indicates whether to execute the handler when the watch is first bound. A value of true indicates that the handler method will be executed immediately when it is declared in the watch. execute handler

deep

When it is necessary to monitor the changes of an object, the ordinary watch method cannot monitor the changes of the internal properties of the object. Only the data in the data can monitor the changes. At this time, the deep property is required to deeply monitor the object.

this.$refs.roomTypeCode.innerHTML is to be assigned

The assignment of this.$refs can be viewed in this blog

https://www.cnblogs.com/frost-yen/p/11145791.html

this.$refs.roomTypeCode.innerHTML = newVal.roomTypeCode ? newVal.roomTypeCode : '';

Determine if there is a value. If there is, return the new value of newVal.roomTypeCode, if not, give it empty.

After this method, I go to run the code. As soon as you enter the page, the dynamic data is directly rendered, and there is no need to refresh the page.

{{o.name}}

{{m.name}}