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 .
Virtual DOM (Virtaul DOM): js subject with simulation, save the current view of all the objects in substantially DOM node tree structure described relationship between nodes and attributes. Js objects with a description of each node, and the parent-child relationship, forming a virtual DOM object tree structure.
Record and summary of items responsive vue often encountered:
Because the basic data types as long as declared in the data, the data base does not exist does not respond to the problem, so focus on the array and object data vue in response to questions, vue modify object properties can be detected, but can not monitor all the changes arrays and add and delete objects, can only use the array method of variation and $ set method.
1. modify existing properties responsive to an array or an object method
When it is desired to modify the object or attribute, the attribute is not added, has been declared in a response data Data can be directly changed operation, data will go through the step of FIG change triggered change the view. Direct obj.xxx = xxx can, except arrays, but backstage pass over the json array, the array of nested objects can also be modified directly object in the array, because a defect resulted Object.defindeProperty can not monitor changes in the array , but always data may traverse the depth of the data, to the array of nested objects add the get and set methods, monitor completion of the object.
2. Add an attribute responsive to responsive objects in the array or method of this. $ Set () method or array mutation
Even a background pass over json array, may also be used this. $ Set to add a responsive property to an array in which an object, such as this. $ Set (arr [0], 'xxx', xxx). Or using methods such as mutation array splice, mutation can refer to more arrays vue document.
3. data declared in an array or an object, or an object held by replacing the array overall response of formula
Alternatively responsive to the array and responsive to the new target data, can be copied directly, because the data declared data access attributes have been added the setter, when reassigning a new heap memory address, the object or the array will was added loop through access properties, it is also responsive type.
4. vue not listen to add and delete objects directly through obj.xxx = xxx add a property not modify the current component of a responsive data re-trigger the current component re-render, you can also make a non-responsive Data Stay updated status (special circumstances).
给一个数据添加一个非响应式的数据，例如一个已经在data中声明过的数据obj，obj.xxx=xxx,新增一个原本没有的数据，当你继续修改组件中一个其他的响应式数据，该obj也会同步更新到最新的数据另一种情况，当你向一个对象或者数组中同时增加一个响应式和非响应式数据，非响应式数据也会同步更新到页面。例如修改页面的其他响应式数据或者 this.$forceUpdate()。
图中this.haveSelectedPeople是data中声明过的一个空数组，此时用非变异方法forEach循环数组向每一项添加三个非响应式数据和两个响应式数据，可以使添加的非响应式数据也有实时响应的效果，不建议这样做，因为会使代码难以理解，不过向数组中的每一项循环添加属性使用this.$set是可以经常利用的。
Object.defindProperty虽然能够实现双向绑定了，但是还是有缺点，只能对对象的属性进行数据劫持，所以会深度遍历整个对象，不管层级有多深，只要数组中嵌套有对象，就能监听到对象的数据变化无法监听到数组的变化，Proxy就没有这个问题，可以监听整个对象的数据变化，所以下个vue版本会用用Proxy代替definedProperty