To solve the problem, look at the official API first

This API explains how Vue data changes and view updates work in great detail. I recommend reading this information first, and then sharing some of my actual mistakes in the project.

Summarize the information in the API

1. One of the most important and fundamental ways to implement responses is to declare all root responses before initializing the instanceproperty, even if it’s just a null value.

For the underlying type of data, as long as you initialize it, no matter how you change the data, it will trigger an update of the corresponding view, right

2. For objects, change the root-level response directly for each changeproperty, or throughVue.set(object, propertyName, value)Method to change the property.

In our normal development, the most common occurrence is to use the object when the data is updated, the view is not updated. This problem occurs when you change the root-level reactive property and add additional properties. Such as:

export default {
	data() {
		treeData: []},methods: {
		// If this is a tree data interface, data is the tree data
		getTree(this.params).then(({data}) = > {
			this.treeData = data // Change the root-level responsive treeData property
			this.format(data)
		}),
		// For this tree we need to expand each node by default
		format(data) {
			data.forEach(item= > { 
				// Add another (expand) attribute. If the data returned by the back end has this attribute by default
				// There is nothing wrong with the change, but if not, it is a new attribute
				// Need to use the API mentioned above
				// Vue.set(item, 'expand', true)
				// If you don't use vue.set, put this.treeData = data under this.format(data), and then change the root-level response property
				item.expand = true 
				item.children && this.format(item.children)
			})
		}	
	}
}
Copy the code

Push, pop, shift, unshift, splice, etc., can’t respond by changing the array length directly via subscript or length assignment. If it’s an array object, use the loop methods forEach, Map, etc., to change the data directly inside the loop via item.property, as soon as the current array is added to the root-level responsive property, And any object in an array that is not assigned by subscript can trigger a response (including deeper multidimensional array objects). Such as:

<template>
  <div class="test-component">
    <button v-for="(item, i) in arr" :key="i" @click="changeHandle(item)">{{item.number}}</button>
  </div>
</template>

<script>
export default {
	data() {
		return{
			arr: [{
				number: 1}]}},created() {
		this.arr.push({ number: 2})
		this.arr[2] = { number: 4}},methods: {.changeHandle(item) {
	      item.number++
	    }	
	}
}
</script>
Copy the code

As you can see, data initialized by default can increment the response, and data inserted by push can increment the response, but data assigned by subscript cannot trigger the response. It is only when the first two data changes that the response function is triggered that Vue compares the data changes and finds that the third data has also changed, so that the third data shows the latest value on the page. So the initialization mentioned above is only for data updates to trigger a response. Therefore, when using VUE, people often encounter that the third data click does not change, and then the other update response is triggered.

4. A not recommended method. As you know, even if a data change does not trigger an update response, other update responses that do will check for the current data change. If you can’t figure out what’s wrong with your code, you can use hack methods to manually add a data-listen-update property to the unresponsive part of the code and initialize a root-level response property in data. The property is reassigned each time the data changes, causing it to trigger the update view check. If that doesn’t work, use the following methods to be more violent.

exprot default {
	data() {
		return {
			update: true.// update in the v-if= "update" to be updated}},methods: {
		change() {
			// Here is the code that changed the data
			this.update = false
			this.$nextTick(() = > { this.update = true})}}}Copy the code

This is a very violent method, do not recommend to use, really can not solve the use of it.

conclusion

To trigger the update response, there are only a few things to note. The root response property must be added, and the object property and array data must be added using vue.set. No, that’s it. It’s easy, isn’t it?

If there are omissions or mistakes above, welcome to correct, thank you