国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue 進階系列（三）之Render函數原理及實現

geekidentity / 2121人閱讀

摘要：進階系列一之響應式原理及實現進階系列二之插件原理及實現進階系列三之函數原理及實現函數原理根據第一篇文章介紹的響應式原理，如下圖所示。在初始化階段，本質上發生在函數中，然后通過函數生成，根據生成。負責收集依賴，清除依賴和通知依賴。

（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）

Vue進階系列匯總如下，歡迎閱讀，歡迎加高級前端進階群一起學習（文末）。

Vue 進階系列（一）之響應式原理及實現

Vue 進階系列（二）之插件原理及實現

Vue 進階系列（三）之Render函數原理及實現

Render函數原理

根據第一篇文章介紹的響應式原理，如下圖所示。

在初始化階段，本質上發生在auto run函數中，然后通過render函數生成Virtual DOM，view根據Virtual DOM生成Actual DOM。因為render函數依賴于頁面上所有的數據data，并且這些數據是響應式的，所有的數據作為組件render函數的依賴。一旦這些數據有所改變，那么render函數會被重新調用。

在更新階段，render函數會重新調用并且返回一個新的Virtual Dom，新舊Virtual DOM之間會進行比較，把diff之后的最小改動應用到Actual DOM中。

Watcher負責收集依賴，清除依賴和通知依賴。在大型復雜的組件樹結構下，由于采用了精確的依賴追蹤系統，所以會避免組件的過度渲染。

Actual DOM 和 Virtual DOM

Actual DOM 通過document.createElement("div")生成一個DOM節點。

document.createElement("div")

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

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

vm.$createElement("div")

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

因為Virtual DOM的渲染邏輯和Actual DOM解耦了，所以有能力運行在的非瀏覽器環境中，這就是為什么Virtual DOM出現之后混合開發開始流行的原因，React Native 和 Weex能夠實現的原理就是這個。

JSX和Template

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

JSX更加動態化，對于使用編程語言是很有幫助的，可以做任何事，但是動態化使得編譯優化更加復雜和困難。

Template更加靜態化并且對于表達式有更多約束，但是可以快速復用已經存在的模板，模板約束意味著可以在編譯時做更多的性能優化，相對于JSX在編譯時間上有著更多優勢。

實例1：實現example組件

要求使用如下

要求輸出如下


  
0

  
1

  
2

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

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一個 HTML 標簽字符串，組件選項對象，或者
  // 解析上述任何一種的一個 async 異步函數。必需參數。
  "div",

  // {Object}
  // 一個包含模板相關屬性的數據對象
  // 你可以在 template 中使用這些特性。可選參數。
  {
    
  },

  // {String | Array}
  // 子虛擬節點 (VNodes)，由 `createElement()` 構建而成，
  // 也可以使用字符串來生成“文本虛擬節點”。可選參數。
  [
    "先寫一些文字",
    createElement("h1", "一則頭條"),
    createElement(MyComponent, {
      props: {
        someProp: "foobar"
      }
    })
  ]
)

知道了用法之后，就可以在render中返回createElement生成的虛擬節點，外層是div，內層是三個錨點標題h1 h2 h3，所以內層需要遍歷下，使用兩個createElement就可以完成了。

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

實現如下
實例2：實現動態的組件

要求如下

實現一個Foo組件渲染

foo
，實現一個Bar組件渲染
bar
。

實現一個組件，根據屬性ok動態渲染Foo組件或者Bar組件。如果屬性ok是true，那么最終的渲染應該是

foo
。

實現一個按鈕控制屬性ok，通過這個屬性讓在Foo或者Bar之間切換。

根據上面的要求，在模板中調用組件，然后定義

實例3：實現組件

要求如下

實現一個withAvatarURL函數，要求傳入一個帶有url屬性的組件，返回一個接收username屬性的高階組件，這個高階組件主要負責獲取相應的頭像URL。

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

例子如下

const SmartAvatar = withAvatarURL(Avatar)

// 使用這個方式


// 替換下面的方式

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

實現如下







  





本文內容參考自VUE作者尤大的付費視頻         
Vue官網之渲染函數 & JSX
交流

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

http://github.com/yygmind/blog

我是木易楊，網易高級前端工程師，跟著我每周重點攻克一個前端面試重難點。接下來讓我帶你走進高級前端的世界，在進階的路上，共勉！

如果你想加群討論每期面試知識點，公眾號回復[加群]即可

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99093.html

相關文章

  • Vue 進階系列（一）之響應式原理及實現

    摘要：進階系列一之響應式原理及實現進階系列二之插件原理及實現進階系列三之函數原理及實現什么是響應式表示一個狀態改變之后，如何動態改變整個系統，在實際項目應用場景中即數據如何動態改變。描述符必須是這兩種形式之一，但二者不能共存，不然會出現異常。 （關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）showImg(https://githu...

    MonoLog 評論0 收藏0

  • Vue 進階系列（二）之插件原理及實現

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

    wuaiqiu 評論0 收藏0

  • 關于Vue2一些值得推薦的文章 -- 五、六月份

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

    sutaking 評論0 收藏0

  • 關于Vue2一些值得推薦的文章 -- 五、六月份

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

    khs1994 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<