Vue原始碼後記 vFor列表渲染（3）

經過dom字串的ast轉化，再通過render變成vnode，最後就剩下patch到頁面上了。

render函式跑完應該是在這裡：

function

mountcomponent(vm, el, hydrating) 
}//beforemount
varupdatecomponent;
/*istanbul ignore if 
*/if ("development" !== 'production' && config.performance &&mark) ;
} else
; }
//code...
//mounted
return
vm }

vm._render()會生成乙個vnode看，接下來呼叫_update渲染頁面，如下：

vue.prototype._update = function

(vnode, hydrating) 
else
//code...
}; vue$3.prototype.__patch__ = inbrowser ?patch : noop;
var patch =createpatchfunction();
function
createpatchfunction(backend) ;
var modules =backend.modules;
var nodeops =backend.nodeops;
for (i = 0; i < hooks.length; ++i) 
//fn...
return
function
patch(oldvnode, vnode, hydrating, removeonly, parentelm, refelm) else
else
}invokeinserthook(vnode, insertedvnodequeue, isinitialpatch);
return
vnode.elm
}}

由於是初始化頁面，所有在update的過程中，oldvnode被設定為空的div虛擬dom，然後與生成的虛擬dom進行替換。

核心細節在上述**中的createelm函式：

//

vnode => 生成的vnode
//insertedvnodequeue => 
//parentelm => body
//refelm => #text
//nested => undefined
function
createelm(vnode, insertedvnodequeue, parentelm, refelm, nested) 
var data =vnode.data;
var children =vnode.children;
var tag =vnode.tag;
if(isdef(tag)) 
//將子節點插入到父節點中
//處理到最外層節點 頁面會渲染
insert(parentelm, vnode.elm, refelm);
}if ("development" !== 'production' && data &&data.pre) 
} else
if(istrue(vnode.iscomment)) 
else
}

其實，這個普通的patch沒有區別，只是由於是多個標籤，所以會有兄弟元素，在插入節點會呼叫insertbefore進行插入，最後5個a標籤依次插入生成的div，然後div插入body標籤完成頁面渲染。

雖然迴圈生成a標籤以及其屬性比較麻煩，但是由於整個標籤是一次性插入body中，所以對於效能也沒有什麼影響。

完事，確實沒什麼好說的，至於v-if、v-show那些，有空一次性寫完。

vue 列表渲染v for

我們可以用v for指令基於乙個陣列來渲染乙個列表。v for指令需要使用 item in items 形式的特殊語法，其中items是源資料陣列，而item則是被迭代的陣列元素的別名。lang en charset utf 8 name viewport content width device ...

Vue模板語法 mustache語法列表渲染 事件

vue模板語法 mustache語法 雙大括號語法 1.指令 vue 指令 作用 是用來操作dom的，指令就是繫結在dom身上的乙個屬性，這個屬性具備一定的功能，這個功能用來操作dom 以後我們不在像以前一樣，先獲取dom，在操作了，我們現在可以直接使用指令來操作dom 這個指令需要模板語法的支援，...

vue心得之 原始碼解析v for為什麼要加key

為了標識該節點是該節點，優化patch演算法，在某些情況下可以減少dom操作 具體使用場景即作用參考下原始碼 vue2 由以上 可以理解網上的這兩張圖了 對arrdata a,b,c,d,e 更新成arrdata a,b,f,c,d,e 在 v for迴圈遍歷後新增了key能標識原本的a,b,c,d...