What is the reason why vue cannot listen to the object

Preface

In Vue.js development, two-way data binding is often used, which is one of the core functions of Vue.js. But sometimes you find that when you create an object on a Vue instance and then add a new property to the object, Vue does not detect the property change. This article will explore this issue in detail.

This article will explore the following questions:

1. Under what circumstances can a Vue object listen to property changes?
2. Under what circumstances can Vue fail to detect changes in objects?
3. How does Vue solve the problem of being unable to listen to objects?

Under what circumstances can a Vue object detect property changes?

In Vue.js, only properties defined when instantiating a Vue object are reactive. For example:

var vm = new Vue({
  data: {
    message: 'Hello world'
  }
});

// 改变message属性，view会自动更新
vm.message = 'Changed message';

If we define a complex data type, such as an object or an array, in the Vue instance from the beginning, the properties in the object or the items in the array will automatically become reactive properties.

For example:

var vm = new Vue({
  data: {
    obj: {
      message: 'Hello world'
    },
    arr: [1, 2, 3, 4, 5]
  }
});

// 对象的属性变化可以被侦听到
vm.obj.message = 'Changed message';

//数组的项目变化可以被侦听到
vm.arr.push(6);

Since Vue.js will use the Object.defineProperty() method on the Vue instance to convert the properties in the object into getters/setters, the object properties can be detected. Variety.

Under what circumstances can Vue fail to detect changes in objects?

In the above, we mentioned that when a complex data type is defined in a Vue instance, the properties in the object or the items in the array will automatically become responsive properties. But when you add a new property to an object, Vue cannot listen to changes in that property.

For example:

var vm = new Vue({
  data: {
    obj: {
      message: 'Hello world'
    }
  }
});

// 新添加属性，无法被侦听到
vm.obj.newProp = 'new value';

//改变新添加属性，仍然无法被侦听到
vm.obj.newProp = 'changed value';

Vue cannot listen to changes in newly added properties because Vue.js only listens to the defined properties when instantiating the Vue object, not to Later added properties are listened to. That is, when you add a new property at runtime, you need to use the Vue.set() method to add a new property and make it reactive. For example:

var vm = new Vue({
  data: {
    obj: {
      message: 'Hello world'
    }
  }
});

// 使用Vue.set()方法来添加新属性
Vue.set(vm.obj, 'newProp', 'new value');

//新属性可以被侦听到
vm.obj.newProp = 'changed value';

How does Vue solve the problem of being unable to listen to objects?

In addition to using the Vue.set() method to add a new property and make it reactive, there are other ways to solve the problem of not being able to listen to the object.

1. Defining all properties in the Vue instantiation

The best way to avoid adding new properties after creating the Vue instance is to define all properties in the Vue instantiation. For example:

var vm = new Vue({
  data: {
    obj: {
      message: 'Hello world',
      newProp: ''
    }
  }
});

//新属性现在侦听到了
vm.obj.newProp = 'new value';

2. Use the Vue.observable() method

The Vue.observable() method takes the responsive object as a parameter and returns a responsive object object. (Note that this method is new in Vue 2.6.0 version). For example:

import Vue from 'vue';

var obj = {
  message: 'Hello world'
};
//使用Vue.observable()方法
var observableObj = Vue.observable(obj);

//新属性现在侦听到了
observableObj.newProp = 'new value';

Conclusion

In Vue.js development, the two-way data binding function is very important. However, when using Vue objects, you need to pay attention to the following points:

1. Only properties defined when instantiating a Vue object are responsive.
2. When you add a new property to an object, Vue cannot listen to changes in the property.
3. If you need to add a new property and make it responsive, use the Vue.set() method.
4. Newer versions of Vue, such as Vue 2.6.0, can use the Vue.observable() method to convert an object into a responsive object.

When you can use responsive properties correctly, Vue.js will bring you simple and compact code, intuitive UI and better user experience.

The above is the detailed content of What is the reason why vue cannot listen to the object. For more information, please follow other related articles on the PHP Chinese website!