Vue data responsive

Time:2022-5-4

1. How to track data changes

When a normal JavaScript object is passed into a Vue instance asdataOption, Vue will traverse all the properties of this object and useObject.definePropertyTake thesepropertyConvert all togetter/setter

thesegetter/setterThey are invisible to the user, but internally they enable Vue to track dependenciespropertyNotify changes when accessed and modified.

Each component instance corresponds to onewatcherInstance, which will “touch” the data in the process of component renderingpropertyRecord as dependency. After that, when the dependencysetterWhen triggered, it will be notifiedwatcherSo that its associated components can be re rendered.

Vue data responsive

2. Precautions for detecting changes

Vue cannot detect changes in arrays and objects. Nevertheless, there are some ways to avoid these restrictions and ensure their responsiveness.

#Object:
Vue cannot detectpropertyAdd or remove. Because Vue will initialize the instancepropertyimplementgetter/setterTransformation, sopropertyMust exist on the data object for Vue to convert it to responsive. For example:

var vm = new Vue({
  data:{
    a:1
  }
})

// `vm. A ` is responsive

vm.b = 2
// `vm. B ` is non responsive

For instances that have been created, Vue does not allow dynamic addition of root level responsive properties. However, you can useVue.set(object, propertyName, value)Method to add a responsive property to a nested object.
You can also useVue.set(this.object, 'propertyName', value)perhapsthis.$set(this.object, 'propertyName', value)

Sometimes you may need to assign multiple new values to an existing objectpropertyFor example, useObject.assign()or_.extend()。 However, this adds new information to the objectpropertyUpdates are not triggered. In this case, you should use the combination of the original object and the object to be mixed inpropertyCreate a new object together.

//Replace ` object assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

#Array:
When modifying the array with the array index value and array length, Vue cannot detect the change of the array, for example:

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm. Items [1] = 'x' // not responsive
vm. items. Length = 2 // not responsive

In order to modify the array, you can useVue.set()perhapsthis.$set()
Vue tampered with the attribute method of array in data and formed seven variant APIs, which are:
push(); pop(); shift(); unshift(); splice(); sort(); rverse()Used to implement different operations on arrays.

3. Declarative and responsive property

Because Vue does not allow dynamic addition of root level responsive properties, you must declare all root level responsive properties before initializing the instance, even if it is only a null value:

var vm = new Vue({
  data: {
    //Declare message as a null string
    message: ''
  },
  template: '<div>{{ message }}</div>'
})
//Set later ` message`
vm.message = 'Hello!'

If you’re not heredataDeclared in optionmessage, Vue will warn you that the rendering function is trying to access a property that does not exist.

There are technical reasons behind this limitation. It eliminates a class of boundary conditions in the dependency tracking system and enables Vue instances to work better with the type checking system. But at the same time, there is also an important consideration in code Maintainability: data objects are like the structure of component state (schema). Declaring all responsive properties in advance can make the component code easier to understand when it is modified in the future or read to other developers.