在日常項目中，我們通常不會注意到這一個點，因為具體在體現上並沒有什么差別，但在性能層面確實不同的，也是需要我們去注意的一點，如果在小項目的情況下，可能不會存在太大的差別，但在大型的項目中，就往往會影響，比如頁面加載太慢，導致的用戶體驗差。主要的原因還是源於 在循環中我們沒有加 key 這個標識，導致 Dom 操作多次產生的。
接下來，我就帶大家來體驗一下， 在循環中加 key 與 不 加 key的區別？
有興趣的小伙伴，可以根據以下的步驟操作起來，只有自己去上手操作，才能對其掌握，這樣也會對源碼有深刻的理解。話不多說，我們立馬進入～～～
一、 預備工作
1. Vue2.6 源碼的 clone
2. 瀏覽器，我用的是 google
3. 瀏覽器內斷點操作
二、新建 html
在 Vue2.6 源碼目錄下，找到 examples 文件夾，新建 /06.key/index.html , 以下為 html 內部代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="add">添加</button>
<button @click="delect">刪除</button>
<ul>
<li v-for="item in NumberGroup">{{item}}</li> </ul>
</div>
<script src="../../dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
NumberGroup: ['a', 'b', 'c'] },
methods: {
add() {
this.NumberGroup.splice(1, 0, 'd') // this.arr = ['a', 'd', 'b', 'c']
},
delect() {
this.NumberGroup.splice(0, 1) // this.arr = ['b', 'c']
}
}
})
</script>
</body>
</html>
三、斷點
打開 google 瀏覽器，F12 找到 sources, 根據下面圖片，找到 虛擬 Dom 對比的文件，並進行斷點
四、源碼分析
/**
*
* @param parentElm 父級 Element
* @param oldCh 老 Vnode-list-虛擬Dom
* @param newCh 新 Vnode-list-虛擬Dom
* @param insertedVnodeQueue
* @param removeOnly
*/
function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
// 老的開始 Index
let oldStartIdx = 0
// 新的開始 Index
let newStartIdx = 0
// 老的結束 Index
let oldEndIdx = oldCh.length - 1
// 老的開始 Vnode
let oldStartVnode = oldCh[0]
// 老的結束 Vnode
let oldEndVnode = oldCh[oldEndIdx]
// 新的結束 Index
let newEndIdx = newCh.length - 1
// 新的開始 Vnode
let newStartVnode = newCh[0]
// 新的結束 Vnode
let newEndVnode = newCh[newEndIdx]
let oldKeyToIdx, idxInOld, vnodeToMove, refElm
// removeOnly is a special flag used only by <transition-group>
// to ensure removed elements stay in correct relative positions
// during leaving transitions
const canMove = !removeOnly
if (process.env.NODE_ENV !== 'production') {
checkDuplicateKeys(newCh)
}
/**
* 老的開始 Index <= 舊的結束 Index && 新的開始 Index <= 新的結束 Index
**/
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
// 老的開始 Index 是否存在
if (isUndef(oldStartVnode)) {
oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
// 老的結束 Index 是否存在
} else if (isUndef(oldEndVnode)) {
oldEndVnode = oldCh[--oldEndIdx]
// 老的開始 Vnode 與 新的開始 Vnode 是否相同，依據是 key 是否相同
} else if (sameVnode(oldStartVnode, newStartVnode)) {
patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
oldStartVnode = oldCh[++oldStartIdx]
newStartVnode = newCh[++newStartIdx]
// 老的結束 Vnode 與 新的結束 Vnode 是否相同，依據是 key 是否相同
} else if (sameVnode(oldEndVnode, newEndVnode)) {
patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
oldEndVnode = oldCh[--oldEndIdx]
newEndVnode = newCh[--newEndIdx]
// 老的開始 Vnode 與 新的結束 Vnode 是否相同，依據是 key 是否相同
} else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
oldStartVnode = oldCh[++oldStartIdx]
newEndVnode = newCh[--newEndIdx]
// 老的結束 Vnode 與 新的開始 Vnode 是否相同，依據是 key 是否相同
} else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
oldEndVnode = oldCh[--oldEndIdx]
newStartVnode = newCh[++newStartIdx]
} else {
if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
idxInOld = isDef(newStartVnode.key)
? oldKeyToIdx[newStartVnode.key]
: findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
if (isUndef(idxInOld)) { // New element
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
} else {
vnodeToMove = oldCh[idxInOld]
if (sameVnode(vnodeToMove, newStartVnode)) {
patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
oldCh[idxInOld] = undefined
canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
} else {
// same key but different element. treat as new element
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
}
}
newStartVnode = newCh[++newStartIdx]
}
}
if (oldStartIdx > oldEndIdx) {
// 老的開始 Index > 老的結束 Index 【 新增 Vnode 】
refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
} else if (newStartIdx > newEndIdx) {
// 新的開始 Index > 新的結束 Index 【 刪除 Vnode 】
removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
}
}
四、調試操作
操作：點擊 添加 按鈕，進入斷點
五、最終實現
Vue 中 data 下 添加一個 NumberGroup屬性 = [ A, B, C ], 點擊添加按鈕 NumberGroup屬性 = [ A, D, B, C ]
六、進入調試
進入 updateChildren 斷點，我們會發現 oldCh.length = 3, newCh.length = 4, 以下為 oldCh, newCh 的 大概 Vnode，可通過 斷點查看具體值的內容
oldCh = [
0: VNode {tag: "li", data: {…}, children: Array(1), text: undefined, elm: li, …}
1: VNode {tag: "li", data: {…}, children: Array(1), text: undefined, elm: li, …}
2: VNode {tag: "li", data: {…}, children: Array(1), text: undefined, elm: li, …}
_isVList: true
length: 3
__proto__: Array(0)
]
newCh = [
0: VNode {tag: "li", data: {…}, children: Array(1), text: undefined, elm: li, …}
1: VNode {tag: "li", data: {…}, children: Array(1), text: undefined, elm: li, …}
2: VNode {tag: "li", data: {…}, children: Array(1), text: undefined, elm: li, …}
_isVList: true
length: 3
__proto__: Array(0)
]
七、初始化數據
let oldStartIdx = 0 // 老的開始 Index
let newStartIdx = 0 // 新的開始 Index
let oldEndIdx = oldCh.length - 1 // 老的結束 Index = 2
let newEndIdx = newCh.length - 1 // 新的結束 Index = 3
let oldStartVnode = oldCh[0] // 老的 NumberGroup[0]
let newStartVnode = newCh[0] // 新的 NumberGroup[0]
let oldEndVnode = oldCh[oldEndIdx] // 老的 NumberGroup[2]
let newEndVnode = newCh[newEndIdx] // 新的 NumberGroup[3]
八、在沒有 Key 的情況下
一、 當 oldStartIdx = 0, newStartIdx = 0 的情況下。
1、在沒有 Key 的情況下。sameVnode 下的 key 都是 undefined ，所以是相同的
function sameVnode (a, b) {
return (
a.key === b.key && (
(
a.tag === b.tag &&
a.isComment === b.isComment &&
isDef(a.data) === isDef(b.data) &&
sameInputType(a, b)
) || (
isTrue(a.isAsyncPlaceholder) &&
a.asyncFactory === b.asyncFactory &&
isUndef(b.asyncFactory.error)
)
)
)
}
2. key 相同的情況下~
` 判斷 oldVnode.children && Vnode.children 是否都存在,
` 如果 存在， 則再次進入 updateChildren 方法，將 children 內部的 Vnode 進行再次對比，
` Vnode 相同，對比 oldVnode.text ?== Vnode.text
` text 相同， 返回
` oldStartIdx = 1，newStartIdx = 1， oldStartVnode = oldCh[1] ， newStartVnode = newCh[1]
function patchVnode (
oldVnode,
vnode,
insertedVnodeQueue,
ownerArray,
index,
removeOnly
) {
if (oldVnode === vnode) {
return
}
if (isDef(vnode.elm) && isDef(ownerArray)) {
// clone reused vnode
vnode = ownerArray[index] = cloneVNode(vnode)
}
const elm = vnode.elm = oldVnode.elm
if (isTrue(oldVnode.isAsyncPlaceholder)) {
if (isDef(vnode.asyncFactory.resolved)) {
hydrate(oldVnode.elm, vnode, insertedVnodeQueue)
} else {
vnode.isAsyncPlaceholder = true
}
return
}
// reuse element for static trees.
// note we only do this if the vnode is cloned -
// if the new node is not cloned it means the render functions have been
// reset by the hot-reload-api and we need to do a proper re-render.
if (isTrue(vnode.isStatic) &&
isTrue(oldVnode.isStatic) &&
vnode.key === oldVnode.key &&
(isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
) {
vnode.componentInstance = oldVnode.componentInstance
return
}
let i
const data = vnode.data
if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
i(oldVnode, vnode)
}
const oldCh = oldVnode.children
const ch = vnode.children
if (isDef(data) && isPatchable(vnode)) {
for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
}
if (isUndef(vnode.text)) {
if (isDef(oldCh) && isDef(ch)) {
if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
} else if (isDef(ch)) {
if (process.env.NODE_ENV !== 'production') {
checkDuplicateKeys(ch)
}
if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
} else if (isDef(oldCh)) {
removeVnodes(elm, oldCh, 0, oldCh.length - 1)
} else if (isDef(oldVnode.text)) {
nodeOps.setTextContent(elm, '')
}
} else if (oldVnode.text !== vnode.text) {
nodeOps.setTextContent(elm, vnode.text)
}
if (isDef(data)) {
if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
}
}
二、 當 oldStartIdx = 1, newStartIdx = 1 的情況下。
1、在沒有 Key 的情況下。sameVnode 下的 key 都是 undefined ，所以是相同的
2. key 相同的情況下~
` 判斷 oldVnode.children && Vnode.children 是否都存在,
` 如果 存在， 則再次進入 updateChildren 方法，將 children 內部的 Vnode 進行再次對比，
` Vnode 相同，對比 oldVnode.text ?== Vnode.text
` text 不相同， 進入方法 nodeOps.setTextContent(elm, vnode.text)
` 舊的 text = B = 新的 text = D
` 則 NumberGroup = [ A, D, C ]
` oldStartIdx = 2，newStartIdx = 2， oldStartVnode = oldCh[2] ， newStartVnode = newCh[2]
三、 當 oldStartIdx = 2, newStartIdx = 2 的情況下。
1、在沒有 Key 的情況下。sameVnode 下的 key 都是 undefined ，所以是相同的
2. key 相同的情況下~
` 判斷 oldVnode.children && Vnode.children 是否都存在,
` 如果 存在， 則再次進入 updateChildren 方法，將 children 內部的 Vnode 進行再次對比，
` Vnode 相同，對比 oldVnode.text ?== Vnode.text
` text 不相同， 進入方法 nodeOps.setTextContent(elm, vnode.text)
` 舊的 text = C = 新的 text = B
` 則 NumberGroup = [ A, D, B ]
` oldStartIdx = 3，newStartIdx = 3， oldStartVnode = oldCh[3] ， newStartVnode = newCh[3]
` oldStartVnode = undefined, 因為 oldEndIdx 最大 為 2, newEndIdx 最大 為 3， 所以 newStartVnode 是有值
四、當 oldStartIdx = 3, newStartIdx = 3 ，oldEndIdx = 2， newEndIdx = 3 的情況下。
1、當 oldStartIdx > oldEndIdx 時， 進入 addVnodes()
function addVnodes(parentElm, refElm, vnodes, startIdx, endIdx, insertedVnodeQueue) {
for (; startIdx <= endIdx; ++startIdx) {
createElm(vnodes[startIdx], insertedVnodeQueue, parentElm, refElm, false, vnodes, startIdx)
}
}
2. 進入 createElm 方法，將 newEndVnode = newCh[3]，內的 Vnode 轉換 為真實 Dom
function createElm(
vnode,
insertedVnodeQueue,
parentElm,
refElm,
nested,
ownerArray,
index
) {
if (isDef(vnode.elm) && isDef(ownerArray)) {
// This vnode was used in a previous render!
// now it's used as a new node, overwriting its elm would cause
// potential patch errors down the road when it's used as an insertion
// reference node. Instead, we clone the node on-demand before creating
// associated DOM element for it.
vnode = ownerArray[index] = cloneVNode(vnode)
}
vnode.isRootInsert = !nested // for transition enter check
if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
return
}
const data = vnode.data
const children = vnode.children
const tag = vnode.tag
if (isDef(tag)) {
if (process.env.NODE_ENV !== 'production') {
if (data && data.pre) {
creatingElmInVPre++
}
if (isUnknownElement(vnode, creatingElmInVPre)) {
warn(
'Unknown custom element: <' + tag + '> - did you ' +
'register the component correctly? For recursive components, ' +
'make sure to provide the "name" option.',
vnode.context
)
}
}
vnode.elm = vnode.ns
? nodeOps.createElementNS(vnode.ns, tag)
: nodeOps.createElement(tag, vnode)
setScope(vnode)
/* istanbul ignore if */
if (__WEEX__) {
// in Weex, the default insertion order is parent-first.
// List items can be optimized to use children-first insertion
// with append="tree".
const appendAsTree = isDef(data) && isTrue(data.appendAsTree)
if (!appendAsTree) {
if (isDef(data)) {
invokeCreateHooks(vnode, insertedVnodeQueue)
}
insert(parentElm, vnode.elm, refElm)
}
createChildren(vnode, children, insertedVnodeQueue)
if (appendAsTree) {
if (isDef(data)) {
invokeCreateHooks(vnode, insertedVnodeQueue)
}
insert(parentElm, vnode.elm, refElm)
}
} else {
createChildren(vnode, children, insertedVnodeQueue)
if (isDef(data)) {
invokeCreateHooks(vnode, insertedVnodeQueue)
}
insert(parentElm, vnode.elm, refElm)
}
if (process.env.NODE_ENV !== 'production' && data && data.pre) {
creatingElmInVPre--
}
} else if (isTrue(vnode.isComment)) {
vnode.elm = nodeOps.createComment(vnode.text)
insert(parentElm, vnode.elm, refElm)
} else {
vnode.elm = nodeOps.createTextNode(vnode.text)
insert(parentElm, vnode.elm, refElm)
}
}
` 通過 insert 方法，將 真實 Dom 掛載到 界面上
function insert(parent, elm, ref) {
if (isDef(parent)) {
if (isDef(ref)) {
if (nodeOps.parentNode(ref) === parent) {
nodeOps.insertBefore(parent, elm, ref)
}
} else {
nodeOps.appendChild(parent, elm)
}
}
}
` 則 NumberGroup = [ A, D, B, C ]
五、將 Html 代碼中的 V-for 內， 加入 :key 屬性，在有 Key 的情況下
一、 當 oldStartIdx = 0, newStartIdx = 0 的情況下。
1、在有 Key 的情況下。sameVnode 下的 key = a ，所以是相同的
function sameVnode (a, b) {
return (
a.key === b.key && (
(
a.tag === b.tag &&
a.isComment === b.isComment &&
isDef(a.data) === isDef(b.data) &&
sameInputType(a, b)
) || (
isTrue(a.isAsyncPlaceholder) &&
a.asyncFactory === b.asyncFactory &&
isUndef(b.asyncFactory.error)
)
)
)
}
2. key 相同的情況下~
` 判斷 oldVnode.children && Vnode.children 是否都存在,
` 如果 存在， 則再次進入 updateChildren 方法，將 children 內部的 Vnode 進行再次對比，
` Vnode 相同，對比 oldVnode.text ?== Vnode.text
` text 相同， 返回
` 則 NumberGroup = [ A, B, C ]
` oldStartIdx = 1，newStartIdx = 1， oldStartVnode = oldCh[1] ， newStartVnode = newCh[1]
二、 當 oldStartIdx = 1, newStartIdx = 1 的情況下。
1、對比 (sameVnode(oldStartVnode, newStartVnode))
2、在有 Key 的情況下。sameVnode 下的 key 不相同， oldStartVnode-key = 'B', newStartVnode-key = 'D'
3、當 Start Index 不相同的情況下，則 從后往前開始對比，
三、當 oldEndIdx = 2, newEndIdx = 3 的情況下。
1、對比 sameVnode(oldEndVnode, newEndVnode)
2、在有 Key 的情況下。sameVnode 下的 key 相同， oldEndVnode-key = 'C', newEndVnode-key = 'C'
` 判斷 oldVnode.children && Vnode.children 是否都存在,
` 如果 存在， 則再次進入 updateChildren 方法，將 children 內部的 Vnode 進行再次對比，
` Vnode 相同，對比 oldVnode.text ?== Vnode.text
` text 相同， 返回
` 則 NumberGroup = [ A, B, C ]
` oldEndIdx = 1, newEndIdx = 2，oldStartIdx = 1，newStartIdx = 1，
` oldStartVnode = oldCh[1] ， newStartVnode = newCh[1]
` oldEndVnode = oldCh[1] ， newEndVnode = newCh[2]
四、當 oldStartIdx = 1，newStartIdx = 1， oldEndIdx = 1, newEndIdx = 2 的情況下。
1、對比 sameVnode(oldStartVnode, newStartVnode)
2、在有 Key 的情況下。sameVnode 下的 key 相同， oldEndVnode-key = 'B', newEndVnode-key = 'B'
` 判斷 oldVnode.children && Vnode.children 是否都存在,
` 如果 存在， 則再次進入 updateChildren 方法，將 children 內部的 Vnode 進行再次對比，
` Vnode 相同，對比 oldVnode.text ?== Vnode.text
` text 相同， 返回
` 則 NumberGroup = [ A, B, C ]
` oldEndIdx = 0, newEndIdx = 1，oldStartIdx = 1，newStartIdx = 1，
` oldStartVnode = oldCh[1] ， newStartVnode = newCh[1]
` oldEndVnode = oldCh[0] ， newEndVnode = newCh[1]
五、當 oldStartIdx = 1，newStartIdx = 1， oldEndIdx = 0, newEndIdx = 1 的情況下。
1、進入 oldStartIdx > oldEndIdx 判斷
2、進入 addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
function addVnodes(parentElm, refElm, vnodes, startIdx, endIdx, insertedVnodeQueue) {
for (; startIdx <= endIdx; ++startIdx) {
createElm(vnodes[startIdx], insertedVnodeQueue, parentElm, refElm, false, vnodes, startIdx)
}
}
` newStartIdx = 1， 將 vnode[1] 插入 oldVnode[1]中
` 通過 createElm 將 虛擬 Dom 轉化為 真實 Dom
function createElm(
vnode,
insertedVnodeQueue,
parentElm,
refElm,
nested,
ownerArray,
index
) {
if (isDef(vnode.elm) && isDef(ownerArray)) {
// This vnode was used in a previous render!
// now it's used as a new node, overwriting its elm would cause
// potential patch errors down the road when it's used as an insertion
// reference node. Instead, we clone the node on-demand before creating
// associated DOM element for it.
vnode = ownerArray[index] = cloneVNode(vnode)
}
vnode.isRootInsert = !nested // for transition enter check
if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
return
}
const data = vnode.data
const children = vnode.children
const tag = vnode.tag
if (isDef(tag)) {
if (process.env.NODE_ENV !== 'production') {
if (data && data.pre) {
creatingElmInVPre++
}
if (isUnknownElement(vnode, creatingElmInVPre)) {
warn(
'Unknown custom element: <' + tag + '> - did you ' +
'register the component correctly? For recursive components, ' +
'make sure to provide the "name" option.',
vnode.context
)
}
}
vnode.elm = vnode.ns
? nodeOps.createElementNS(vnode.ns, tag)
: nodeOps.createElement(tag, vnode)
setScope(vnode)
/* istanbul ignore if */
if (__WEEX__) {
// in Weex, the default insertion order is parent-first.
// List items can be optimized to use children-first insertion
// with append="tree".
const appendAsTree = isDef(data) && isTrue(data.appendAsTree)
if (!appendAsTree) {
if (isDef(data)) {
invokeCreateHooks(vnode, insertedVnodeQueue)
}
insert(parentElm, vnode.elm, refElm)
}
createChildren(vnode, children, insertedVnodeQueue)
if (appendAsTree) {
if (isDef(data)) {
invokeCreateHooks(vnode, insertedVnodeQueue)
}
insert(parentElm, vnode.elm, refElm)
}
} else {
createChildren(vnode, children, insertedVnodeQueue)
if (isDef(data)) {
invokeCreateHooks(vnode, insertedVnodeQueue)
}
insert(parentElm, vnode.elm, refElm)
}
if (process.env.NODE_ENV !== 'production' && data && data.pre) {
creatingElmInVPre--
}
} else if (isTrue(vnode.isComment)) {
vnode.elm = nodeOps.createComment(vnode.text)
insert(parentElm, vnode.elm, refElm)
} else {
vnode.elm = nodeOps.createTextNode(vnode.text)
insert(parentElm, vnode.elm, refElm)
}
}
` 通過 insert 方法，將 真實 Dom 掛載到 界面上
function insert(parent, elm, ref) {
if (isDef(parent)) {
if (isDef(ref)) {
if (nodeOps.parentNode(ref) === parent) {
nodeOps.insertBefore(parent, elm, ref)
}
} else {
nodeOps.appendChild(parent, elm)
}
}
}
` 則 NumberGroup = [ A, D, B, C ]
總結：對比 V-for 中 加key 與 不加key 的情況下，我們可以發現，
1、不加key，比加key 的情況下，Dom多操作了2次
2、當不加key的情況下，每次Vnode不同，都會觸發Dom操作，多次 Dom的操作會，影響性能的問題。
3、有key的情況下，分為以下種
` 判斷 oldStartVnode, newStartVnode 是否相同 (注：從前往后)
` 不同，則 判斷 oldEndVnode, newEndVnode 是否相同 (注：從后往前)
` 不同，則 判斷 oldStartVnode, newEndVnode 是否相同 (注：前 == 后)
` 不同，則 判斷 oldEndVnode, newStartVnode 是否相同 (注：后 == 前)
` 不同，則 從 newVnode 中，拿出第一個 Vode，循環 oldVnode，並進行查找
` 如果發現存在, 則 將 oldVnode 匹配到的 值，插入到第一位，並展示
` 如果不存在，則 將新的 Vnode 的值 插入到 oldVnode對於的Index 中，通過 creatElm 將 虛擬 Dom 轉換 為真實 Dom
` 如果 oldVnode 中存在的值，newVnode中不存在，則清除