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

This article mainly introduces the Vue Watch method can not monitor the array or object value changes how to solve the relevant knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that after reading this Vue Watch method can not monitor the array or object value changes how to solve the article will have a harvest, let's take a look at it.

Preface

The fact that Vue cannot detect changes in array and object values has something to do with the principle of two-way binding. The principle of two-way binding of Vue is to redefine the GET and SET methods of objects by using Object.defineproperty in js, but this method has some defects. Is that you can only listen for values that already exist in the object. In the method of listening for property changes in an object, there is no doubt that proxy using ES6 is superior.

At the same time, I also tested that array object changes could not be detected in Vue. The code is as follows.

Let vm = new Vue ({el:'# app', data: {message: 'wxs', arr: [1meme 2Mae 3], obj: {name:'wxs', age:21}} Methods: {change:function () {this.message = 'vue' this.arr [0] = 100this.obj.name='xxx'}}, watch: {message:function (newValue,oldValue) {console.log (' message changed')} Arr:function (newValue,oldValue) {console.log ('arr changed')}, obj:function (newValue,oldValue) {console.log ('obj changed')}}, template: `{{message}} {{arr [0]}} {{obj.name}} change!`})

Very simple code, set the button to change the value of message,arr,obj, while setting listening events for the changes in these three values, the test results are as follows.

The view shows that all three values have changed, but Vue only listens for the first value change.

The official document gives the following explanation

Vue provides a solution to this.

Vue cannot detect array changes. There are two situations mentioned in the official documentation.

One: use the index to directly change the value of arr, as I wrote in the button event (arr [0] = 1000)

The solution is to rewrite this.arr [0] = 1000 into a form this.$set (this.arr,0,1000) that Vue can listen on.

This.$set accepts three parameters, the first is the array object to be manipulated, the second is the array subscript of the data to be modified, and the third is the modified value.

Look at the effect of the picture above.

The worthwhile method of modifying arr will be modified as follows

Methods: {change:function () {this.message = 'vue' this.$set (this.arr,0100) this.obj.name='xxx'}}

Successful monitoring

Second: directly modify the length of the array, such as this.arr.length=3

Let's take a test. We delete the values in the array by modifying the length of the array to see if watch can listen.

Methods: {change:function () {this.message = 'vue' this.arr.length=0 this.obj.name='xxx'}}

As a result, it can't be heard.

The solution uses the array method arr.splice in js to manipulate the array to modify the length.

Look at the effect.

Methods: {change:function () {this.message = 'vue' this.arr.splice (0prime1) this.obj.name='xxx'}}

We delete the first value of the array, and the second value of the array becomes arr [0], which is rendered to the page, and the watch listens successfully.

Cannot listen to the addition or deletion of object properties in Vue

Solution: when this.$set (obj,name,'xxx') operates on an object, set accepts three parameters, the first is the name of the object, the second is the key value of the object, and the third is the value corresponding to key.

This.obj=Object.assign ({}, this.arr, {age:21,major:'soft'})

After doing this, you can successfully listen for changes in arrays and objects.

Methods: {change:function () {this.message = 'vue' this.$set (this.arr,1100) this.$set (this.obj,'major','Vue')}}

The console output is as follows

So here's the problem. I'm changing the new value of the object, 'major'. Please take a look at the code that sets obj in the method method in my code above.

At this point, Vue just sensed that I had changed the new value of the object. After my testing, I changed the old value of the object, such as the name value. Vue still does not listen for changes in objects. At this time, Vue proposed the method of deep monitoring as follows.

But this method can not detect the change of the new value of the object after my test.

This is the end of the article on "how to solve the problem that the Vue Watch method cannot detect changes in array or object values?" Thank you for reading! I believe that everyone has a certain understanding of "Vue Watch method can not monitor the array or object value change how to solve" knowledge, if you want to learn more knowledge, welcome to follow the industry information channel.

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.