亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Vue 進(jìn)階系列（三）之Render函數(shù)原理及實(shí)現(xiàn)

geekidentity / 2173人閱讀

摘要：進(jìn)階系列一之響應(yīng)式原理及實(shí)現(xiàn)進(jìn)階系列二之插件原理及實(shí)現(xiàn)進(jìn)階系列三之函數(shù)原理及實(shí)現(xiàn)函數(shù)原理根據(jù)第一篇文章介紹的響應(yīng)式原理，如下圖所示。在初始化階段，本質(zhì)上發(fā)生在函數(shù)中，然后通過函數(shù)生成，根據(jù)生成。負(fù)責(zé)收集依賴，清除依賴和通知依賴。

（關(guān)注福利，關(guān)注本公眾號(hào)回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實(shí)戰(zhàn)、面試指導(dǎo)）

Vue進(jìn)階系列匯總?cè)缦?，歡迎閱讀，歡迎加高級(jí)前端進(jìn)階群一起學(xué)習(xí)（文末）。

Vue 進(jìn)階系列（一）之響應(yīng)式原理及實(shí)現(xiàn)

Vue 進(jìn)階系列（二）之插件原理及實(shí)現(xiàn)

Vue 進(jìn)階系列（三）之Render函數(shù)原理及實(shí)現(xiàn)

Render函數(shù)原理

根據(jù)第一篇文章介紹的響應(yīng)式原理，如下圖所示。

在初始化階段，本質(zhì)上發(fā)生在auto run函數(shù)中，然后通過render函數(shù)生成Virtual DOM，view根據(jù)Virtual DOM生成Actual DOM。因?yàn)?b>render函數(shù)依賴于頁(yè)面上所有的數(shù)據(jù)data，并且這些數(shù)據(jù)是響應(yīng)式的，所有的數(shù)據(jù)作為組件render函數(shù)的依賴。一旦這些數(shù)據(jù)有所改變，那么render函數(shù)會(huì)被重新調(diào)用。

在更新階段，render函數(shù)會(huì)重新調(diào)用并且返回一個(gè)新的Virtual Dom，新舊Virtual DOM之間會(huì)進(jìn)行比較，把diff之后的最小改動(dòng)應(yīng)用到Actual DOM中。

Watcher負(fù)責(zé)收集依賴，清除依賴和通知依賴。在大型復(fù)雜的組件樹結(jié)構(gòu)下，由于采用了精確的依賴追蹤系統(tǒng)，所以會(huì)避免組件的過度渲染。

Actual DOM 和 Virtual DOM

Actual DOM 通過document.createElement("div")生成一個(gè)DOM節(jié)點(diǎn)。

document.createElement("div")

// 瀏覽器原生對(duì)象（開銷大）
"[object HTMLDivElement]"

Virtual DOM 通過 vm.$createElement("div")生成一個(gè)JS對(duì)象，VDOM對(duì)象有一個(gè)表示div的tag屬性，有一個(gè)包含了所有可能特性的data屬性，可能還有一個(gè)包含更多虛擬節(jié)點(diǎn)的children列表。

vm.$createElement("div")

// 純JS對(duì)象（輕量）
{ tag: "div", data: { attrs: {}, ...}, children: [] }

因?yàn)閂irtual DOM的渲染邏輯和Actual DOM解耦了，所以有能力運(yùn)行在的非瀏覽器環(huán)境中，這就是為什么Virtual DOM出現(xiàn)之后混合開發(fā)開始流行的原因，React Native 和 Weex能夠?qū)崿F(xiàn)的原理就是這個(gè)。

JSX和Template

JSX和Template都是用于聲明DOM和state之間關(guān)系的一種方式，在Vue中，Template是默認(rèn)推薦的方式，但是也可以使用JSX來做更靈活的事。

JSX更加動(dòng)態(tài)化，對(duì)于使用編程語言是很有幫助的，可以做任何事，但是動(dòng)態(tài)化使得編譯優(yōu)化更加復(fù)雜和困難。

Template更加靜態(tài)化并且對(duì)于表達(dá)式有更多約束，但是可以快速?gòu)?fù)用已經(jīng)存在的模板，模板約束意味著可以在編譯時(shí)做更多的性能優(yōu)化，相對(duì)于JSX在編譯時(shí)間上有著更多優(yōu)勢(shì)。

實(shí)例1：實(shí)現(xiàn)example組件

要求使用如下

要求輸出如下


  
0

  
1

  
2

上面這個(gè)需求可以通過render函數(shù)來做，官方提供了createElement 函數(shù)用來生成模板。createElement("div", {}， [...])可接受的參數(shù)如下。

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一個(gè) HTML 標(biāo)簽字符串，組件選項(xiàng)對(duì)象，或者
  // 解析上述任何一種的一個(gè) async 異步函數(shù)。必需參數(shù)。
  "div",

  // {Object}
  // 一個(gè)包含模板相關(guān)屬性的數(shù)據(jù)對(duì)象
  // 你可以在 template 中使用這些特性?？蛇x參數(shù)。
  {
    
  },

  // {String | Array}
  // 子虛擬節(jié)點(diǎn) (VNodes)，由 `createElement()` 構(gòu)建而成，
  // 也可以使用字符串來生成“文本虛擬節(jié)點(diǎn)”?？蛇x參數(shù)。
  [
    "先寫一些文字",
    createElement("h1", "一則頭條"),
    createElement(MyComponent, {
      props: {
        someProp: "foobar"
      }
    })
  ]
)

知道了用法之后，就可以在render中返回createElement生成的虛擬節(jié)點(diǎn)，外層是div，內(nèi)層是三個(gè)錨點(diǎn)標(biāo)題h1 h2 h3，所以內(nèi)層需要遍歷下，使用兩個(gè)createElement就可以完成了。

通常使用h作為createElement的別名，這是Vue的通用慣例，也是JSX的要求。

實(shí)現(xiàn)如下
實(shí)例2：實(shí)現(xiàn)動(dòng)態(tài)的組件

要求如下

實(shí)現(xiàn)一個(gè)Foo組件渲染

foo
，實(shí)現(xiàn)一個(gè)Bar組件渲染
bar
。

實(shí)現(xiàn)一個(gè)組件，根據(jù)屬性ok動(dòng)態(tài)渲染Foo組件或者Bar組件。如果屬性ok是true，那么最終的渲染應(yīng)該是

foo
。

實(shí)現(xiàn)一個(gè)按鈕控制屬性ok，通過這個(gè)屬性讓在Foo或者Bar之間切換。

根據(jù)上面的要求，在模板中調(diào)用組件，然后定義

實(shí)例3：實(shí)現(xiàn)組件

要求如下

實(shí)現(xiàn)一個(gè)withAvatarURL函數(shù)，要求傳入一個(gè)帶有url屬性的組件，返回一個(gè)接收username屬性的高階組件，這個(gè)高階組件主要負(fù)責(zé)獲取相應(yīng)的頭像URL。

在API返回之前，高階組件將占位符URLhttp://via.placeholder.com/200x200傳遞給內(nèi)部組件。

例子如下

const SmartAvatar = withAvatarURL(Avatar)

// 使用這個(gè)方式


// 替換下面的方式

withAvatarURL函數(shù)返回一個(gè)對(duì)象，接收username屬性，在生命周期created獲取頭像URL。Avatar對(duì)象接收src屬性，src的內(nèi)容從withAvatarURL中獲取，然后展示在上。實(shí)例化的時(shí)候，傳入新定義的組件名SmartAvatar。

實(shí)現(xiàn)如下







  





本文內(nèi)容參考自VUE作者尤大的付費(fèi)視頻         
Vue官網(wǎng)之渲染函數(shù) & JSX
交流

本人Github鏈接如下，歡迎各位Star

http://github.com/yygmind/blog

我是木易楊，網(wǎng)易高級(jí)前端工程師，跟著我每周重點(diǎn)攻克一個(gè)前端面試重難點(diǎn)。接下來讓我?guī)阕哌M(jìn)高級(jí)前端的世界，在進(jìn)階的路上，共勉！

如果你想加群討論每期面試知識(shí)點(diǎn)，公眾號(hào)回復(fù)[加群]即可

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/99093.html

相關(guān)文章

  • Vue 進(jìn)階系列（一）之響應(yīng)式原理及實(shí)現(xiàn)

    摘要：進(jìn)階系列一之響應(yīng)式原理及實(shí)現(xiàn)進(jìn)階系列二之插件原理及實(shí)現(xiàn)進(jìn)階系列三之函數(shù)原理及實(shí)現(xiàn)什么是響應(yīng)式表示一個(gè)狀態(tài)改變之后，如何動(dòng)態(tài)改變整個(gè)系統(tǒng)，在實(shí)際項(xiàng)目應(yīng)用場(chǎng)景中即數(shù)據(jù)如何動(dòng)態(tài)改變。描述符必須是這兩種形式之一，但二者不能共存，不然會(huì)出現(xiàn)異常。 （關(guān)注福利，關(guān)注本公眾號(hào)回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實(shí)戰(zhàn)、面試指導(dǎo)）showImg(https://githu...

    MonoLog 評(píng)論0 收藏0

  • Vue 進(jìn)階系列（二）之插件原理及實(shí)現(xiàn)

    摘要：示例輸出第一步先不考慮插件，在已有的中是沒有這個(gè)公共方法的，如果要簡(jiǎn)單實(shí)現(xiàn)的話可以通過鉤子函數(shù)來，即在里面驗(yàn)證邏輯。按照插件的開發(fā)流程，應(yīng)該有一個(gè)公開方法，在里面使用全局的方法添加一些組件選項(xiàng)，方法包含一個(gè)鉤子函數(shù)，在鉤子函數(shù)中驗(yàn)證。 （關(guān)注福利，關(guān)注本公眾號(hào)回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實(shí)戰(zhàn)、面試指導(dǎo)）showImg(https://segmen...

    wuaiqiu 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...

    sutaking 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...

    khs1994 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<