Analysis and solution to the problem that causes VUE page not to refresh

References/a/1190000022772025

Unable to detect property that does not exist in data when the instance was created

Cause: Since Vue performs getter/setter conversion on the property when initializing the instance, the property must exist on the data object to allow Vue to convert it to responsive.
Scene:

var vm = new Vue({
  data:{},
  // The page will not change  template: '&lt;div&gt;{{message}}&lt;/div&gt;'
})
 = 'Hello!' // `` Not responsive

Solution:

var vm = new Vue({
  data: {
    // Declare a and b as an empty string    message: '',
  },
  template: '&lt;div&gt;{{ message }}&lt;/div&gt;'
})
 = 'Hello!'

Unable to detect addition or removal of object property

Reason: Official - Due to the limitations of JavaScript (ES5), the addition or removal of object properties cannot be detected. Because the property is converted to a getter/setter when initializing the instance, the property must be on the data object to convert it to make it responsive.
Scene:

var vm = new Vue({
  data:{
    obj: {
      id: 001
    }
  },
  // The page will not change  template: '&lt;div&gt;{{  }}&lt;/div&gt;'
})
 = 'hello' // Not responsivedelete        // Not responsive

Solution:

// Dynamic addition -(, propertyName, newValue)
// Dynamically add - vm.$setvm.$set(, propertyName, newValue)
// Dynamically add multiple// Instead (, { a: 1, b: 2 }) = ({}, , { a: 1, b: 2 })
// Dynamic removal -(, propertyName)
// Dynamic removal - vm.$deletevm.$delete(, propertyName)

Cannot detect that an array item is directly modified through the array index

Reason: Official - Due to JavaScript limitations, Vue cannot detect changes in arrays and objects; You Yuxi - The performance cost is not proportional to gaining user experience.
Scene:

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
[1] = 'x' // Not responsive

Solution:

// 
(, indexOfItem, newValue)
// vm.$set
vm.$set(, indexOfItem, newValue)
// 
(indexOfItem, 1, newValue)

Expansion: () can monitor changes in arrays
() can monitor changes in the array. However, adding an index to the array will not monitor data changes, because the index of the newly added array cannot be monitored, so will delete an index.
Scene:

var arr = [1, 2, 3, 4]
(function(item, index) {
    (arr, index, {
    set: function(value) {
      ('Trigger setter')
      item = value
    },
    get: function() {
      ('Trigger getter')
      return item
    }
  })
})
arr[1] = '123'  // Trigger setterarr[1]          // Trigger getter return value is "123"arr[5] = 5      // Will not trigger setter and getter

Cannot monitor changes in directly modifying array length

Reason: Official - Due to JavaScript limitations, Vue cannot detect changes in arrays and objects; You Yuxi - The performance cost is not proportional to gaining user experience.
Scene:

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
 = 2 // Not responsive

Solution:

(newLength)

5. Operate before the asynchronous update is performed. DOM data will not change.

Cause: Vue is executed asynchronously when updating the DOM. As long as data changes are heard, Vue will turn on a queue and buffer all data changes that occur in the same event loop. If the same watcher is fired multiple times, it will only be pushed into the queue once. This removal of duplicate data when buffering is very important to avoid unnecessary calculations and DOM operations. Then, in the next event loop "tick", Vue refreshes the queue and performs the actual (deduplicated) work. Vue attempts to use native , MutationObserver and setImmediate for asynchronous queues internally. If the execution environment does not support it, setTimeout(fn, 0) will be used instead.
Scene:

&lt;div &gt;{{message}}&lt;/div&gt;
var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
 = 'new message' // Change the datavm.$ === 'new message' // false
vm.$ = 'red' // The page has not changed

Solution:

var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
 = 'new message' // Change the data//Use (callback) callback will be called after the DOM update is completed(function () {
  vm.$ === 'new message' // true
  vm.$ = 'red' // The text color turns red})

Expansion: Misunderstanding of data response caused by asynchronous updates

&lt;div &gt;{{}}&lt;/div&gt;
var vm = new Vue({
  el: '#example',
  data: {
    message: {},
  }
})
vm.$nextTick(function () {
   = {}
   = 'I've updated!  '
})

In the previous code, we declared a message empty object in the data object, and then in the asynchronous callback triggered after the next DOM update loop, we executed the following two codes:

= {};
= ‘I’ve updated! ’
At this point, the template has been updated and the page will show that I have updated! .

The template has been updated and should have responsive features. If you think so, you have already fallen into a misunderstanding.

At the beginning, we just declared a message empty object in the data object and did not have a text attribute, so the text attribute does not have a responsive attribute.

But the template has been updated, so what's going on?

That is because the DOM update is asynchronous, that is, when the setter operation occurs, the instruction will not be updated immediately, and the instruction update operation will have a delay. When the instruction update is actually executed, the text attribute has been assigned at this time, so the new value obtained when the instruction updates the template.

Each instruction/data binding in the template has a corresponding watcher object, which records the attributes as dependencies during the calculation process. After that, when the dependent setter is called, the watcher recalculation will be triggered, which will also cause its associated instructions to update the DOM.

The specific process is as follows:

Setter is called when executing = {};.
Tracking that the setter that the message depends on is called will trigger the watcher recalculation.
= ‘I’ve updated! ’; Assign value to the text attribute.
After the execution of the asynchronous callback logic is completed, its associated instructions will be caused to update the DOM and the instruction update will begin to be executed.
Therefore, the real operation to trigger the update of the template is caused by the sentence = {}; because the setter is triggered, so just looking at the above example, the data with responsive characteristics is only the message layer, and its dynamically added attributes do not have it.

Corresponding to the second point above - Vue cannot detect the addition or removal of object property

6. The loop nesting level is too deep, and the view is not updated?

I saw some people on the Internet saying that the data is updated too deeply, which causes the data to not be updated or is slow, which leads to attempt not to update?

Since I have not encountered this situation, when I tried to reproduce this scenario, I found that the above situation did not happen, so I will not describe this too much (if someone encounters this situation in a real scenario, please leave a message).

The solution given by someone to the above situation is to use mandatory updates:

If you find yourself needing a forced update in Vue, 99.9% of the cases are you doing something wrong somewhere.
vm.$forceUpdate()

7. Expansion: When routing parameters change, the page will not be updated (data will not be updated)

Expand a problem that the page does not update due to changes in routing parameters. In essence, the data is not updated.

Cause: When the routing view component refers to the same component, when the route participation changes, the component cannot be updated, which is the problem that the page we often call cannot be updated.
Scene:

<div >
  <ul>
    <li><router-link to="/home/foo">To Foo</router-link></li>    
    <li><router-link to="/home/baz">To Baz</router-link></li>    
    <li><router-link to="/home/bar">To Bar</router-link></li>    
  </ul>    
  <router-view></router-view>
</div>
const Home = {
  template: `<div>{{message}}</div>`,
  data() {
    return {
      message: this.$
    }
  }
}
const router = new VueRouter({
  mode:'history',
    routes: [
    {path: '/home', component: Home },
    {path: '/home/:name', component: Home }
  ]
})
new Vue({
  el: '#app',
  router
})

In the previous code, we configured a dynamic route '/home/:name' in the route build option routes, which share a routing component Home, which means they reuse RouterView.

When routing switch is performed, the page will only render the parameters matched by the first route, and then the message will not change.

Solution:

There are many solutions, here are only a few methods I often use.
Listen to $route changes through watch.

const Home = {
  template: `<div>{{message}}</div>`,
  data() {
    return {
      message: this.$
    }
  },
  watch: {
       '$route': function() {
        = this.$
    }
    }
}
...
new Vue({
  el: '#app',
  router
})

Bind the key attribute so that Vue will think it is different.

Disadvantage: If you jump from /home to /user and other routes, we don’t have to worry about component update issues, so the key attribute is redundant at this time.

This is the article about several situations and solutions that cause VUE pages to not refresh. For more related vue pages, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!