Shulou(Shulou.com)06/01 Report--

This article mainly explains "what are the situations where the Vue data are updated but the page is not updated and how to solve them?" interested friends might as well take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "Vue data update but the page is not updated what is the situation and how to solve it?"

1. Vue cannot detect property that does not exist in data when the instance is created.

Reason: because Vue performs getter/setter transformations on property when initializing the instance, property must exist on the data object for Vue to convert it to responsive.

Scene:

Var vm = new Vue ({data: {}, / / the page will not change template:'{{message}}'}) vm.message = 'hellograms' / / `vm.message` is not responsive

Solution:

Var vm = new Vue ({data: {/ / declare an and b to be a null string message:',}, template:'{{message}}'}) vm.message = 'Hellograms' 2. Vue cannot detect the addition or removal of object property

Reason: official-due to the limitation of JavaScript (ES5), Vue.js cannot detect the addition or deletion of object attributes. Because Vue.js converts the property to getter/setter when initializing the instance, the property must be on the data object for Vue.js to transform it for it to be responsive.

Scene:

Var vm = new Vue ({data: {obj: {id: 001}}, / / the page will not change template:'{{obj.message}}'}) vm.obj.message = 'hello' / / not responsive delete vm.obj.id / / not responsive

Solution:

/ / dynamically add-Vue.setVue.set (vm.obj, propertyName, newValue) / / dynamically add-vm.$setvm.$set (vm.obj, propertyName, newValue) / / dynamically add multiple / substitutes for Object.assign (this.obj, {a: 1, b: 2}) this.obj = Object.assign ({}, this.obj, {a: 1, b: 2}) / / dynamically remove-Vue.deleteVue.delete (vm.obj PropertyName) / / dynamic removal-vm.$deletevm.$delete (vm.obj, propertyName) 3. Vue cannot detect direct modification of an array item through an array index

Reason: officially-due to the limitations of JavaScript, Vue cannot detect changes in arrays and objects; you Yuxi-the performance cost is not proportional to the user experience.

Scene:

Var vm = new Vue ({data: {items: ['axed,' baked,'c']}}) vm.items [1] ='x' / / is not responsive

Solution:

/ / Vue.setVue.set (vm.items, indexOfItem, newValue) / / vm.$setvm.$set (vm.items, indexOfItem, newValue) / / Array.prototype.splicevm.items.splice (indexOfItem, 1, newValue) extension: Object.defineProperty () can monitor array changes

Object.defineProperty () can monitor changes in the array. However, adding an attribute (index) to the array does not detect data changes, because the subscript (index) of the new array cannot be detected, and so is deleting an attribute (index).

Scene:

Var arr = [1,2,3,4] arr.forEach (function (item, index) {Object.defineProperty (arr, index, {set: function (value) {console.log ('trigger setter') item = value}) Get: function () {console.log ('trigger getter') return item}}) arr [1] =' 123' / / trigger setterarr [1] / / trigger getter return value of "123" arr [5] = 5 / / does not trigger setter and getter4. Vue cannot monitor changes in the length of directly modified arrays

Reason: officially-due to the limitations of JavaScript, Vue cannot detect changes in arrays and objects; you Yuxi-the performance cost is not proportional to the user experience.

Scene:

Var vm = new Vue ({data: {items: ['axed,' baked,'c']}}) vm.items.length = 2 / / is not responsive

Solution:

Vm.items.splice (newLength) 5. Manipulating the DOM data does not change until the asynchronous update is executed

Reason: Vue executes asynchronously when updating DOM. Whenever a data change is detected, Vue opens a queue and buffers all data changes that occur in the same event loop. If the same watcher is triggered multiple times, it will only be pushed into the queue once. This removal of duplicate data during buffering is 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 internally tries to use native Promise.then, MutationObserver, and setImmediate for asynchronous queues, and uses setTimeout (fn, 0) instead if the execution environment does not support it.

Scene:

{{message}} var vm = new Vue ({el:'# example', data: {message: '123'}}) vm.message =' new message' / / change data vm.$el.textContent = = 'new message' / / falsevm.$el.style.color =' red' / / the page has not changed

Solution:

Var vm = new Vue ({el:'# example' Data: {message: '123}}) vm.message =' new message' / / change data / / use Vue.nextTick (callback) callback to call Vue.nextTick after the DOM update is complete (function () {vm.$el.textContent = 'new message' / / true vm.$el.style.color =' red' / / text color turns red}) extension: errors in data response caused by asynchronous updates Solve {{message.text}} var vm = new Vue ({el:'# example') Data: {message: {},}}) vm.$nextTick (function () {this.message = {} this.message.text ='I updated!' })

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

This.message = {}; this.message.text ='I updated!'

At this point, the template has been updated, and the page will finally show that I have updated.

The template has been updated and should be responsive, and if you think so, then you have entered a misunderstanding.

At first, we just declared an empty message object in the data object and did not have the text property, so the text property was not responsive.

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

That is because the DOM update of Vue.js is asynchronous, that is, when the setter operation occurs, the instruction will not be updated immediately, and there will be a delay in the instruction update operation. When the instruction update is actually executed, the text attribute has been assigned, so the instruction updates the template with a new value.

Each instruction / data binding in the template has a corresponding watcher object that records the attributes as dependencies during the calculation. Later, when the dependent setter is called, the watcher recalculation is triggered, which causes its associated instruction to update the DOM.

The specific process is as follows:

Setter is called when this.message = {}; is executed.

When the setter that Vue.js traces to the message dependency is called, it triggers the watcher recalculation.

This.message.text ='I updated it!' Assign values to the text property

After the execution of the asynchronous callback logic ends, it causes its associated instruction to update DOM, and the instruction update begins to execute.

So the real operation that triggers the template update is this.message = {}; this sentence causes, because setter is triggered, so if you look at the above example, only message is the layer of data with responsive characteristics, and its dynamically added attributes are not available.

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.

See some people on the Internet say that the level of data update is too deep, resulting in data not updated or slow to update, resulting in an attempt not to update?

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

The solution given to the above situation is to use forced updates:

If you find yourself needing a mandatory update in Vue, 99.9% of the cases are that you did something wrong somewhere.

Vm.$forceUpdate () 7. Expansion: when routing parameters change, the page is not updated (data is not updated)

Expand a problem that the page is not updated because of the change of routing parameters. The fact that the page is not updated is essentially that the data is not updated.

Reason: when the routing view component references the same component, when the routing parameter changes, it will cause the component to not be updated, which is the problem that the page cannot be updated.

Scene:

To Foo To Baz To Bar const Home = {template: `{message}}`, data () {return {message: this.$route.params.name} 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 building option routes. They share a routing component, Home, which means they reuse RouterView.

When a route switch is made, the page will only render the parameters to which the first route matches, and when the route switch is made later, the message will not change.

Solution:

There are many ways to solve this problem, and here are only a few of them that I often use.

Listen for changes to $route through watch.

Const Home = {template: `{message}}`, data () {return {message: this.$route.params.name}}, watch: {'$route': function () {this.message = this.$route.params.name}. New Vue ({el:'# app', router})

Bind the key attribute so that Vue thinks this is different.

Disadvantages: if we jump from / home to other routes such as / user, we don't have to worry about component updates, so the key attribute is superfluous at this time.

... At this point, I believe that everyone on the "Vue data update but the page is not updated what and how to solve" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.