1 7 Vue 渲染函式及JSX語法

2021-10-02 15:40:16 字數 1822 閱讀 2747

1. 渲染函式

渲染函式（render函式）

渲染函式解析

2.認識節點、樹及虛擬dom概念

vnode物件原始碼

每個dom元素或元件都對應乙個vnode物件，具體含義見**所示

路徑：src/core/vdom/vnode.js

this


.tag = tag // 當前節點標籤名


this


.data = data // 當前節點資料（vnodedata型別）


this


.children = children // 當前節點子節點


this


.text = text // 當前節點文字


this


.elm = elm // 當前節點對應的真實dom節點


this


.ns = undefined // 當前節點命名空間


this


.context = context // 當前節點上下文


this


.fncontext = undefined // 函式化元件上下文


this


.fnoptions = undefined // 函式化元件配置項


this


.fnscopeid = undefined // 函式化元件scopeid


this


.key = data && data.key // 子節點key屬性


this


.componentoptions = componentoptions // 元件配置項 


this


.componentinstance = undefined // 元件例項


this


.parent = undefined // 當前節點父節點


this


.raw =


false


// 是否為原生html或只是普通文字


this


.isstatic =


false


// 靜態節點標誌 keep-alive


this


.isrootinsert =


true


// 是否作為根節點插入


this


.iscomment =


false


// 是否為注釋節點


this


.iscloned =


false


// 是否為轉殖節點


this


.isonce =


false


// 是否為v-once節點


this


.asyncfactory = asyncfactory // 非同步工廠方法 


this


.asyncmeta = undefined // 非同步meta


this


.isasyncplaceholder =


false


// 是否為非同步佔位
節點、樹及虛擬dom

虛擬dom不是真正意義上的dom，而是乙個輕量級的js物件，在狀態改變的時候，虛擬dom會進行diff演算法計算，來更新只需要被更新的dom，而不是全部的重繪重構。與dom操作相比，虛擬dom是基於js計算的，而且是在記憶體中的，所以開銷會很小。

流程圖：

3.jsx語法及函式式元件

這裡只做簡單介紹

jsx語法

函式式元件

context物件

Vue提高17 Vue響應式原理

簡單來說，依賴收集的過程是 在元件init的過程中，將data中的屬性新增getter setter方法 在元件渲染過程中 render函式執行時 每個元件例項內部會例項化乙個watcher物件，data中的屬性會被touch，觸發getter方法，記錄元件和屬性的對應關係 當屬性更新時，訪問set...

vue 渲染函式處理slot vue 渲染函式

v if template 中配合 v if 條件渲染一整組 paragraph one paragraph two 使用v else 指令來表示 v if 的 else，v else 元素必須緊跟在 v if 或者 v else if元素的後面，否則它將不會被識別 多次使用 v if 如圖所示 通...

vue的渲染 模板 渲染函式

vue 推薦在絕大多數情況下使用模板來建立你的 html。然而在一些場景中，你真的需要 j ascript 的完全程式設計的能力。render函式通過createelement引數來建立 virtual dom returns createelement 乙個 html 標籤名 元件選項物件，或者 ...