Vue原始碼學習（一）
- 虛擬DOM
- Vue原始碼的三大核心模塊
- 實作一個Mini Vue
- 渲染模塊
虛擬DOM
優勢
1、相較于真實DOM，javaScript對虛擬DOM的操作更簡單，虛擬DOM是一個JavaScript物件，JS對物件的可以做更多的邏輯操作，效率也更加高效，
2、具有跨平臺的優勢，可以將VNode轉換想要的節點，渲染在canvas，Android，iOS等，
虛擬DOM的渲染程序
Vue原始碼的三大核心模塊
三大模塊協調作業
實作一個Mini Vue
- 渲染模塊
- 回應式系統模塊
- 入口模塊（掛載函式）
渲染模塊
功能一：h函式，用于回傳一個VNode物件
功能二：mount函式，用于VNode掛載到DOM上
功能三：patch函式，用于對兩個VNode進行對比，決定如何處理新的VNode；
h函式
參照Vue內的h函式來撰寫
function h(tag, props, children) {
return {
tag,
props,
children
}
}
mount函式
function mount(VNode, el) {
const element = document.createElement(VNode.tag);
if (VNode.props) {
for (const key in VNode.props) {
if (key.startsWith("on")) {
const value = key.split("on")[1].toLowerCase();
element.addEventListener(value, VNode.props[key]);
} else {
element.setAttribute(key, VNode.props[key]);
}
}
}
if (VNode.children) {
if (typeof VNode.children === "string") {
element.textContent = VNode.children;
} else {
for (const vnode of VNode.children) {
mount(vnode, element)
}
}
}
el.appendChild(element);
}
測驗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./render.js"></script>
<script>
const result = h(
"div",
{
class: "name",
onClick: () => {
console.log(111);
},
},
[h("h2", null, "fuzhibin"), h("span", { title: "IloveYou" })]
);
mount(result, document.querySelector("#app"));
console.log(result);
</script>
</body>
</html>
瀏覽器展示：
patch函式
Vue原始碼學習(二)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/292969.html
標籤：其他