Data passed in by props under the VUE project, lifecycle tick functions including solutions @TOC that watch does not trigger

Problems encountered

In the process of deep props, the data of props is transmitted to the target file without triggering data update or page update. The watch code is as follows:

  watch: {
  uploaConfig(newVal,oldVal){
   if (this.uploadConfig.moreList && this.uploadConfig.moreList.length > 0) {
      	this.moreList = newVal.moreList
      	}
  	}
  },
Copy the code

Vue-devtoola data transfer results are as follows

Solution Solution 1

Considering that watch may not be able to detect deep key property changes using object passing, the code is changed to the following:

 watch: {
	 'uploaConfig.moreList': {
	      handler (newVal) {
	      if (this.uploadConfig.moreList && this.uploadConfig.moreList.length > 0) {
	      	this.moreList = newVal.moreList
	      	}
	      },
	      deep: true}},Copy the code

The result is obvious and it doesn’t work;

Solution Solution 2

Refer to: vUE official documentation. If you want watch to detect the change and use it immediately, add immediate: true.

watch: {
	    'uploaConfig.moreList': {
	      handler (newVal) {
	      if (this.uploadConfig.moreList && this.uploadConfig.moreList.length > 0) {
	      	this.moreList = newVal.moreList
	      	}
	      },
	      deep: true.immediate: true,}}Copy the code

Finally, the blogger problem was solved

Conclusion:

If there is a problem, try to find the official website first to make sure that you do not understand the correct use of the official API or some specific solutions. If it is helpful to you, please click a “like”

20190626 | did not explain why the original plus deep: true or immediate: true, this update will join the demo

Update the content

1. Routine Monitoring (Watch)

<div class="watch-demo">
    <div class="watch-demo-item">
      <input type="text" v-model="val1">
      <div>{{value1}}</div>
    </div>
  </div>
// ...
data () {
    return {
      val1: ' '.value1: ' '}},watch: {
    val1 (val, oval) {
      this.value1 = val
    }
  },
  methods: {}Copy the code

Output:

  • As can be seen from the above figure, conventional monitoring is exactly the same as what we imagine, ideal and practice perfectly coincide.

2 Object Listening

 <div class="watch-demo-item">
      <input type="text" v-model="obj.val2">
      <div>{{value2}}</div>
    </div>
// ...

data () {
    return {
      val1: ' '.value1: ' '.obj: {
        val2: ' '
      },
      value2: ' '}},watch: {
    val1 (val, oval) {
      this.value1 = val
    },
    obj (val, oval) {
      this.value2 = val.val2
    }
  },
  methods: {}Copy the code

Output result:

  • Why is there something wrong with the object when there is nothing wrong with it

Method 1: Code adjustment is as follows:

 data () {
    return {
      val1: ' '.value1: ' '.obj: {
        val2: ' '
      },
      value2: ' '}},watch: {
    val1 (val, oval) {
      this.value1 = val
    },
    'obj.val2' (val, oval) {
      this.value2 = val
    }
  },
  methods: {}Copy the code

Now the page output is:

But in the real development process, our obJ object is difficult to determine the number of keys, if there are many keys, always can not write multiple listener to listen to the key, right? Here’s another way to do it

Method 2

data () {
    return {
      val1: ' '.value1: ' '.obj: {
        val2: ' '
      },
      value2: ' '}},watch: {
    val1 (val, oval) {
      this.value1 = val
    },
    'obj': {
      handler (val, oval) {
        this.value2 = val.val2
      },
      deep: true}},Copy the code

The output is as follows

“Handler” is an advanced use of watch. It contains an attribute deep, which defaults to false, and an attribute immediate:true, which defaults to false. It will immediately execute the handler method inside, if it is false it will not execute at binding time as we did before. Deep listening affects performance; Both can exist at the same time;

This code demo please go to Watchdemo.vue

If it helps you, please click “like” 👍