Vue data responsive principle

What is responsive

"Responsive" means that when the data changes, the use of code Vue notifies the data. For example, the view used in the rendering data, the data after the change, the view is automatically updated.

Here is a simple example, for a template:

<div id="root">{{ name }}</div>

Create a Vue components:

var vm = new Vue({
  el: '#root',
  data: {
    name: 'luobo'
  }
})

After the code is executed, the corresponding location on the page will be displayed: luobo.

If you want to change the name displayed, only you need to do:

vm.name = 'tang'

This will display the name of the modified page, you do not need to manually modify the DOM to update the data.

Responsive principle

Vue responsive principle is the core object is protected by Object.defindeProperty ES5 access properties in the get and set methods, declared attribute data are added access attributes, when the read data is time data automatic calling the get method when modifying data in the data, automatically calls the set method to detect changes in the data, it will notify the observer Wacher, observer Wacher triggered automatically re-render the current component (sub-assembly will not re-rendered), a new generation virtual DOM tree, Vue framework will go through and compare the differences of each node a new virtual DOM tree and old virtual DOM tree, and recorded, finally, loading operation, the different points all records, local modification to the real DOM tree .

Responsive defect

vue can not monitor the changes in the array

Object.defindProperty Although two-way binding can be achieved, but there are still shortcomings, can only attribute of the object data hijacking, it will traverse the entire depth of the object, no matter how deep level, as long as there is an array of nested objects, you can listen data subject to change can not listen to an array of changes, Proxy do not have this problem, you can monitor data changes across an object, it will be replaced with vue3.0 definedProperty by Proxy.

Vue can not detect the object's properties to add or remove

Modern JS restrictions (and abandoned Object.observe) by, Vue can not be detected by adding or deleting an object property, because the Vue will be instances when properties to perform getter / setter conversion process, so the property must be present on the data object is initialized to let Vue convert it, so as to let it be the response.

var vm = new Vue({
  data:{
  　　a:1
  }
})
// `vm.a` 是响应的
vm.b = 2
// `vm.b` 是非响应的

Vue allowed dynamically adding a new root level responsive properties (root-level reactive property) on the instance has been created, but it can be added to the nested object using Vue.set (object, key, value) method of response properties on.

Vue.set(vm.someObject, 'b', 2)

You can also use vm. $ Set an instance method, which is the alias global Vue.set methods.

this.$set(this.someObject,'b',2)

Sometimes you want to add some attributes to the existing object, for example, to add an attribute with Object.assign () or _.extend () method. However, to add a new property on the object will not be updated. In this case you can create a new object, and attribute it to the new property contains the original object.

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

Two-way data binding principle

。