Vue渲染器設(shè)計(jì)實(shí)現(xiàn)流程詳細(xì)講解
渲染器+響應(yīng)系統(tǒng)
最簡(jiǎn)渲染函數(shù)
使用以下函數(shù)渲染靜態(tài)字符串或者動(dòng)態(tài)拼接內(nèi)容
// 渲染函數(shù) function renderer(domString, container) { container.innerHTML = domString; } // 渲染dom renderer("<p>123</p>", document.getElementById("main"));
vuereactivity
@vue/reactivity
包包含了副作用函數(shù) effect 以及響應(yīng)式 ref
渲染器基本原理
渲染器 renderer,渲染 render
虛擬節(jié)點(diǎn)(vnode) === 虛擬 DOM(vdom)
渲染器把虛擬 DOM 節(jié)點(diǎn)渲染為真實(shí) DOM 節(jié)點(diǎn)的過程叫作掛載(mount)
第一次渲染稱為掛載
后續(xù)渲染稱為打補(bǔ)?。╬atch),也即更新 dom
DIY 渲染器
createRenderer 函數(shù)
這是一個(gè)構(gòu)建渲染器的函數(shù),特別留意其中的打補(bǔ)丁 patch 函數(shù)的編寫!
patch 的三個(gè)參數(shù)分別指:舊 vnode,新 vnode,掛載位置
function createRenderer() { // dom更新函數(shù) function patch(n1, n2, container) {} // 渲染函數(shù) function render(vnode, container) { // 如果虛擬DOM存在,則執(zhí)行更新程序 // 如果不存在,就掛載它 if (vnode) { patch(container._vnode, vnode, container); } else { if (container._vnode) { container.innerHTML = ""; } } container._vnode = vnode; } }
構(gòu)建一個(gè) vnode 然后渲染它
const vnode = { type: "h1", children: "helloworld", }; const renderer = createRenderer(); renderer.render(vnode, document.querySelector("#main"));
兼容所有瀏覽器渲染需求
可以將配置項(xiàng)交予渲染者進(jìn)行定義,而不寫死,這樣就可以適配多瀏覽器了!
首先在渲染器函數(shù)內(nèi)定義三大配置項(xiàng):
function createRenderer() { // 定義三大配置項(xiàng) const { createElement, insert, setElementText } = options; function mountElement(){...} }
定義 mountElement
// 掛載元素函數(shù) function mountElement(vnode, container) { // 判斷元素類型 const ele = createElement(vnode.type); // 如果類型為string,那么設(shè)置文本 if (typeof vnode.children === "string") { setElementText(ele, vnode.children); } // 將新元素插入到指定掛載點(diǎn) insert(ele, container); }
到此這篇關(guān)于Vue渲染器設(shè)計(jì)實(shí)現(xiàn)流程詳細(xì)講解的文章就介紹到這了,更多相關(guān)Vue渲染器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue數(shù)組動(dòng)態(tài)刷新失敗問題及解決
這篇文章主要介紹了vue數(shù)組動(dòng)態(tài)刷新失敗問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03VUE Error: getaddrinfo ENOTFOUND localhost
這篇文章主要介紹了VUE Error: getaddrinfo ENOTFOUND localhost,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05Vue常用傳值方式、父?jìng)髯印⒆觽鞲讣胺歉缸訉?shí)例分析
這篇文章主要介紹了Vue常用傳值方式、父?jìng)髯印⒆觽鞲讣胺歉缸?結(jié)合實(shí)例形式分析了vue.js常見的傳值方式及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-02-02VUE使用canvas繪制管線管廊實(shí)現(xiàn)思路
這篇文章主要為大家介紹了VUE使用canvas繪制管線管廊實(shí)現(xiàn)思路詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04vue click.stop阻止點(diǎn)擊事件繼續(xù)傳播的方法
今天小編就為大家分享一篇vue click.stop阻止點(diǎn)擊事件繼續(xù)傳播的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09