My personal understanding
- diff Algorithm:
From comparing the down layer by layer, each node identifiers generated at the same level are compared: if the identifier is the same, the comparison continues in this next level node, if the child nodes are the same are multiplexed ; if the child were different, this child node judgment,
node if there is a new identifier is added; if the old node identifier does not appear in the new, delete; if the same identifier, content different, then replace. - diff algorithms and virtual dom relationship:
mention virtual dom, DOM will think real, real DOM with jquery or document operation, each algorithm statement will retrieve the document, and then change the very consumption performance, it is the emergence of virtual dom to optimize performance, by diff algorithms, comparing the old and new results, and the time update operation of all dom.
Briefly: obtained by diff diff algorithm algorithm result data table, which has been required operation record table, and then use the DOM fragment js operated unified update dom, i.e. unified computing all changes once the DOM,
and virtual dom vue react substantially the same algorithm, the core is based on two simplifying assumptions
operation processing method of diff: dom tree before and after the operation of comparison with the layer node, layer by layer contrast.
Illustrates
insertion between B and C F 
Diff execute default algorithm is this: that is updated as C F, D is updated to C, E is updated to D, and finally insert E, it is not very inefficient?
Solution: We use the key to make a unique identifier to each node, Diff algorithm can correctly identify this node, finding the right location area to insert a new node.
Old node key and the same place a new node key value can abcde "in situ reuse", without re-calculation, thus greatly improving the efficiency.
explain react in: Whenever you call setState components, react marks it as dirty. At the end of the cycle time, react'll see all the dirty components and re-rendering them.
This means that during the event batch cycle, only one update DOM. This property is the key to building high-performance applications
https://calendar.perfplanet.com/2013/diff/
When Vue.js with v-for being updated list elements have been rendered, it defaults to using "in situ multiplexing" strategy. If the order of the data item is changed, Vue DOM element will not be moved to match the sequence of data items, but simply reuse each element here, and it appears to ensure that each element has been rendered in a particular index. This is similar to Vue 1.x a track-by = "$ index"
in order to give a prompt Vue, so that it can track the status of each node, thereby re-use and reorder existing elements, you need to provide a unique key for each property :
https://cn.vuejs.org/v2/api/#key
special attributes key is mainly used in the virtual DOM algorithm Vue, the identification VNodes old and new nodes in the comparison. If no key, Vue will minimize the use of a dynamic element and possible try to repair / re-use the same algorithm type element. Using the key, it will rearrange the order of the elements based on a change of key, and the key will remove the element does not exist.
The child has the same parent element must have a unique key. Duplicate key will cause rendering errors.