An object is responsive when it can respond to external stimuli.

The schematic diagram is as follows:

Change the value of vm.n, and n in UI(data) will respond

When passing a JS Object to a Vue instance as the data option, Vue iterates through all of the Object’s properties and, using Object.defineProperty, converts these properties into getters and setters. Etters and setters are not visible to the user.

object

Vue cannot detect property additions or deletions. Vue performs getter/setter conversions on property when initializing the instance, so property must exist on the data object for Vue to convert to responsiveness. As follows:

Var vm = new Vue(data:{n:0}) // vm.n

Vue does not allow root-level properties to be added to already created responses. However, responsive properties can be added via vue. set(object,key,value) or vm.$set(object,key,value) methods.

An array of

Vue cannot detect array changes when changing the length of an array or setting an item directly

Var = new vm Vue ({data: {items: {' a ', 'b', 'c'}}}) vm. The items [1] = 'x' / / vm is not response. The items. The length = 2 / / is not respondingCopy the code

For array items, update within a responsive system using the following methods

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
Copy the code
// vm.$set
vm.$set(vm.items, indexOfItem, newValue)
Copy the code
// Array.prototype.splice
vm.items.splice(indexOfItem, 1 ,newValue)
Copy the code

For array lengths, you can use splice

vm.items.splice(newLength)