SoFunction
Updated on 2025-04-05

Several situations and solutions for Vue data update pages but not updated

Official: If, if you find yourself needing to do a forced update in vue, 99.9% of the cases are that you are doing something wrong somewhere.

Case 1: Vue cannot detect variables that do not exist in data when the instance is created

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

For example:

new Vue({
  data:{},
  template: '<div>{{message}}</div>'
})
 = 'Hello world!' // `message` Pages that are not responsive will not change

Solution:

 new Vue({
  data: {
    message: '',
  },
  template: '<div>{{ message }}</div>'
})
 = 'Hello world!'

Situation 2: Vue cannot detect dynamic addition and deletion of objects in data.

For example:

 new Vue({
  data:{
    obj: {
      id: 1
    }
  },
  template: '&lt;div&gt;{{  }}&lt;/div&gt;'
})
 = 'hello' // Not responsivedelete        // Not responsive

Solution:

// Dynamic addition -(, 'id', 002)
 
// Dynamically add - this.$setthis.$set(, 'id', 002)
 
// Dynamically add multiple// Instead (, { a: 1, b: 2 }) = ({}, , { a: 1, b: 2 })
 
// Dynamic removal -(, 'name')
 
// Dynamic removal - this.$deletethis.$delete(, 'name')

Situation 3: When the variable is an array

You cannot directly modify or assign values ​​through indexes, nor can you modify the length of the array

For example:

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

Solution:

// 
(, 4, 'd')
 
// this.$set
this.$set(, 4, 'd)
 
// 
(indexOfItem, 4, 'd')
//Modify the length(3)

Situation 4: Asynchronously obtain interface data, no changes in DOM data are found

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(funcation, 0) will be used instead.

For example:

&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})

Situation 5: The loop nesting level is too deep and the view is not updated

When the nesting is too deep, the page may not be updated. At this time, the page can be forced to refresh

This.$forceUpdate() forces the vue instance to re-render the virtual DOM, note that the component is not reloaded.
Combined with the life cycle of vue, calling $forceUpdate will only trigger the two hook functions beforeUpdate and updated, and will not trigger other hook functions.
It only affects the instance itself and the subcomponents that insert the contents of the slot, not all subcomponents.

//The official said that if you need to use the forceUpdate method in your current scenario, then 99% of it is that there is a problem with your operation.this.$forceUpdate();

Situation 6: When routing parameters change, the page will not be updated (data will not be updated)

For example:

<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:

1. Listen to the changes in $route through watch.

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

2. Bind the key attribute to <router-view>, so Vue will think that this is a different <router-view>.

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.

 <div >
    <router-view :key="key"></router-view>
 </div>

Situation 7: Variables are defined by assignment

There are two types of variables in Vue: responsive variables and non-responsive variables.

Variables obtained from the backend are usually responsive variables, which means they will be monitored by Vue and synchronized to the page. If you modify these responsive variables, the page will change accordingly.

Variables defined by assignment are usually non-responsive variables. If you modify these non-responsive variables, Vue will not monitor their changes, so the page will not change.

If you need to turn a non-responsive variable into a responsive variable, you can use a method or a variant method of an array (such as push, splice, etc.).

Example 1: (Object, added key, attribute value")

//This is used directly on Vue.  For example: (Object, added key, attribute value")//Common in: File//Notice: jsIn the file，Need to be introducedvue，for example: import Vue from vue

Example 2: this.$set(object, added key', attribute value)

this.$set
//This is used on vm or vc instances, such as in vue file, this.$set (object, added key', attribute value)//Common in: In the file

Force update data: this.$forceUpdate();

Reference article link:Many problems and solutions for Vue data update but page not updated_vue.js_me

Summarize

This is the article about the several situations and solutions for the Vue data update page but not updated. For more related Vue data update page but not updated, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!