Vue2數據驅動渲染（render、update）

来源:https://www.cnblogs.com/burc/archive/2023/03/29/17254661.html
-Advertisement-
Play Games

上一篇文章我們介紹了 Vue2模版編譯原理，這一章我們的目標是弄清楚模版 template和響應式數據是如何渲染成最終的DOM。數據更新驅動視圖變化這部分後期會單獨講解 我們先看一下模版和響應式數據是如何渲染成最終DOM 的流程 Vue初始化 new Vue發生了什麼 Vue入口構造函數 funct ...


上一篇文章我們介紹了 Vue2模版編譯原理，這一章我們的目標是弄清楚模版 template和響應式數據是如何渲染成最終的DOM。數據更新驅動視圖變化這部分後期會單獨講解

我們先看一下模版和響應式數據是如何渲染成最終DOM 的流程

Vue初始化

new Vue發生了什麼

Vue入口構造函數

function Vue(options) {
  this._init(options) // options就是用戶的選項
  ...
}

initMixin(Vue) // 在Vue原型上擴展初始化相關的方法，_init、$mount 等
initLifeCycle(Vue) // 在Vue原型上擴展渲染相關的方法，_render、_c、_v、_s、_update 等

export default Vue

initMixin、initLifeCycle方法

export function initMixin(Vue) {
  Vue.prototype._init = function (options) {
    const vm = this
    vm.$options = options // 將用戶的選項掛載到實例上

    // 初始化數據
    initState(vm)

    if (options.el) {
      vm.$mount(options.el) 
    }
  }

  Vue.prototype.$mount = function (el) {
    const vm = this
    el = document.querySelector(el)
    let ops = vm.$options

    // 這裡需要對模板進行編譯
    const render = compileToFunction(template)
    ops.render = render

    // 實例掛載
    mountComponent(vm, el) 
  }
}

export function initLifeCycle(Vue) {
  Vue.prototype._render = function () {} // 渲染方法
  Vue.prototype._c = function () {} // 創建節點虛擬節點
  Vue.prototype._v = function () {} // 創建文本虛擬節點
  Vue.prototype._s = function () {} // 處理變數
  Vue.prototype._update = function () {} // 初始化元素 和 更新元素
}

在 initMixin 方法中，我們重點關註 compileToFunction模版編譯 和 mountComponent實例掛載 2個方法。我們已經在上一篇文章詳細介紹過 compileToFunction 編譯過程，接下來我們就把重心放在 mountComponent 方法上，它會用到在 initLifeCycle 方法給Vue原型上擴展的方法，在 render 和 update章節會做詳細講解

實例掛載

mountComponent 方法主要是 實例化了一個渲染 watcher，updateComponent 作為回調會立即執行一次。watcher 還有一個其他作用，就是當響應式數據發生變化時，也會通過內部的 update方法執行updateComponent 回調。

現在我們先無需瞭解 watcher 的內部實現及其原理，後面會作詳細介紹

vm._render 方法會創建一個虛擬DOM（即以 VNode節點作為基礎的樹），vm._update 方法則是把這個虛擬DOM 渲染成一個真實的 DOM 並渲染出來

export function mountComponent(vm, el) {
  // 這裡的el 是通過querySelector獲取的
  vm.$el = el

  const updateComponent = () => {
    // 1.調用render方法創建虛擬DOM，即以 VNode節點作為基礎的樹
    const vnode = vm._render() // 內部調用 vm.$options.render()

    // 2.根據虛擬DOM 產生真實DOM，插入到el元素中
    vm._update(vnode)
  }

  // 實例化一個渲染watcher，true用於標識是一個渲染watche
  const watcher = new Watcher(vm, updateComponent, true)
}

接下來我們會重點分析最核心的 2 個方法：vm._render 和 vm._update

render

我們需要在Vue原型上擴展 _render 方法

Vue.prototype._render = function () {
  // 當渲染的時候會去實例中取值，我們就可以將屬性和視圖綁定在一起
  const vm = this
  return vm.$options.render.call(vm) // 模版編譯後生成的render方法
}

在之前的 Vue $mount過程中，我們已通過 compileToFunction方法將模版template 編譯成 render方法，其返回一個 虛擬DOM。template轉化成render函數的結果如下


<div id="app" style="color: red; background: yellow">
   hello {{name}} world
   <span></span>
</div>

ƒ anonymous(
) {
  with(this){
    return _c('div',{id:"app",style:{"color":"red","background":"yellow"}},
              _v("hello"+_s(name)+"world"),
              _c('span',null))
  }
}

render 方法內部使用了 _c、_v、_s 方法，我們也需要在Vue原型上擴展它們

  • _c: 創建節點虛擬節點（VNode）
  • _v: 創建文本虛擬節點（VNode）
  • _s: 處理變數
// _c('div',{},...children)
// _c('div',{id:"app",style:{"color":"red"," background":"yellow"}},_v("hello"+_s(name)+"world"),_c('span',null))
Vue.prototype._c = function () {
  return createElementVNode(this, ...arguments)
}

// _v(text)
Vue.prototype._v = function () {
  return createTextVNode(this, ...arguments)
}

Vue.prototype._s = function (value) {
  if (typeof value !== 'object') return value
  return JSON.stringify(value)
}

接下來我們看一下 createElementVNode 和 createTextVNode 是如何創建 VNode 的

createElement

每個 VNode 有 children，children 每個元素也是一個 VNode，這樣就形成了一個虛擬樹結構，用於描述真實的DOM樹結構，即我們的虛擬DOM

// h()  _c() 創建元素的虛擬節點 VNode
export function createElementVNode(vm, tag, data, ...children) {
  if (data == null) {
    data = {}
  }
  let key = data.key
  if (key) {
    delete data.key
  }
  return vnode(vm, tag, key, data, children)
}

// _v() 創建文本虛擬節點
export function createTextVNode(vm, text) {
  return vnode(vm, undefined, undefined, undefined, undefined, text)
}

// 虛擬節點
function vnode(vm, tag, key, data, children, text) {
  return {
    vm,
    tag,
    key,
    data,
    children,
    text,
    // ....
  }
}

VNode 和 AST一樣嗎？
我們的 VNode 描述的是 DOM元素
AST 做的是語法層面的轉化，它描述的是語法本身 ，可以描述 js css html

虛擬DOM

DOM是很慢的，其元素非常龐大，當我們頻繁的去做 DOM更新，會產生一定的性能問題，我們可以直觀感受一下div元素包含的海量屬性

在Javascript對象中，Virtual DOM 表現為一個 Object對象。並且最少包含標簽名 (tag)、屬性 (attrs) 和子元素對象 (children) 三個屬性，不同框架對這三個屬性的名命可能會有差別。

實際上它只是一層對真實DOM的抽象，以JavaScript 對象 (VNode 節點) 作為基礎的樹，用對象的屬性來描述節點，最終可以通過一系列操作使這棵樹映射到真實環境上

vue中 VNode結構如下

export default class VNode {
  tag: string | void;
  data: VNodeData | void;
  children: ?Array<VNode>;
  text: string | void;
  elm: Node | void;
  ns: string | void;
  context: Component | void; // rendered in this component's scope
  functionalContext: Component | void; // only for functional component root nodes
  key: string | number | void;
  componentOptions: VNodeComponentOptions | void;
  componentInstance: Component | void; // component instance
  parent: VNode | void; // component placeholder node
  raw: boolean; // contains raw HTML? (server only)
  isStatic: boolean; // hoisted static node
  isRootInsert: boolean; // necessary for enter transition check
  isComment: boolean; // empty comment placeholder?
  isCloned: boolean; // is a cloned node?
  isOnce: boolean; // is a v-once node?

  constructor (
    tag?: string,
    data?: VNodeData,
    children?: ?Array<VNode>,
    text?: string,
    elm?: Node,
    context?: Component,
    componentOptions?: VNodeComponentOptions
  ) {
    /*當前節點的標簽名*/
    this.tag = tag
    /*當前節點對應的對象，包含了具體的一些數據信息，是一個VNodeData類型，可以參考VNodeData類型中的數據信息*/
    this.data = data
    /*當前節點的子節點，是一個數組*/
    this.children = children
    /*當前節點的文本*/
    this.text = text
    /*當前虛擬節點對應的真實dom節點*/
    this.elm = elm
    /*當前節點的名字空間*/
    this.ns = undefined
    /*編譯作用域*/
    this.context = context
    /*函數化組件作用域*/
    this.functionalContext = undefined
    /*節點的key屬性，被當作節點的標誌，用以優化*/
    this.key = data && data.key
    /*組件的option選項*/
    this.componentOptions = componentOptions
    /*當前節點對應的組件的實例*/
    this.componentInstance = undefined
    /*當前節點的父節點*/
    this.parent = undefined
    /*簡而言之就是是否為原生HTML或只是普通文本，innerHTML的時候為true，textContent的時候為false*/
    this.raw = false
    /*靜態節點標誌*/
    this.isStatic = false
    /*是否作為跟節點插入*/
    this.isRootInsert = true
    /*是否為註釋節點*/
    this.isComment = false
    /*是否為克隆節點*/
    this.isCloned = false
    /*是否有v-once指令*/
    this.isOnce = false
  }

  // DEPRECATED: alias for componentInstance for backwards compat.
  /* istanbul ignore next https://github.com/answershuto/learnVue*/
  get child (): Component | void {
    return this.componentInstance
  }
}

虛擬DOM的優點

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 乾貨分享｜袋鼠雲數棧離線開發平臺在小文件治理上的探索實踐之路
    日常生產中 HDFS 上小文件產生是一個很正常的事情，同時小文件也是 Hadoop 集群運維中的常見挑戰，尤其對於大規模運行的集群來說可謂至關重要。 數據地圖是離線開發產品的基本使用單位，包含全部表和項目的相關信息，可以對錶做相關的許可權管理和脫敏管理操作，以及可以展示對應項目占用情況和其表的占用情況 ...
  • MySQL8.0 優化器介紹（一）
    GreatSQL社區原創內容未經授權不得隨意使用，轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本，使用上與MySQL一致。 作者： 奧特曼愛小怪獸 文章來源：GreatSQL社區原創 前言 線上，遇到一些sql性能問題，需要手術刀級別的調優。optimizer_trace是一 ...
  • 運動健康路線導入，助力用戶輕鬆導航
    華為HMS Core運動健康服務支持通過REST API，以GPX文件格式寫入用戶路線數據，支持導入軌跡（Track）或路程（Route）類型的數據，實現用戶路線數據在華為運動健康App中的展示效果。 假若與華為運動健康App相連接的穿戴設備支持路線導入，那麼用戶路線數據將自動下發至穿戴設備。用戶可 ...
  • 為什麼要將圖片轉成base64的格式？
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 假設，我們有這樣一張 Gif 圖： 利用 CSS，我們嘗試來搞一些事情。 圖片的 Glitch Art 風 在這篇文章中 --CSS 故障藝術，我們介紹了利用混合模式製作一種暈眩感覺的視覺效果。有點類似於抖音的 LOGO。 像是這樣： 假 ...
  • CSS選擇器之基礎選擇器和複合選擇器
    本博文介紹CSS中的基礎選擇器和複合選擇器。基礎選擇器包括標簽選擇器、類選擇器、id選擇器和通配符選擇器，複合選擇器包括後代選擇器、子選擇器、並集選擇器和偽類選擇器。 ...
  • 基於Admin.NET框架的前端的一些改進和代碼生成處理（2）
    在上篇隨筆《基於Admin.NET框架的前端的一些改進和代碼生成處理（1）》中大致介紹了一些關於對Admin.NET框架的前端的改造工作，主要目的就是希望能夠增加代碼的簡潔和可讀性，以及利用代碼生成工具來快速生成相關的代碼，從而減少開發過程中的繁瑣問題。本篇隨筆繼續探討一下，對其中一些模塊功能進行一... ...
  • 淺談Array --JavaScript內置對象
    Array --JavaScript內置對象 描述 可以用一個變數存儲多種數據類型的Array對象，Array不是關聯數組，不能使用字元串作為索引訪問數組元素，需要使用非負整數的下標訪問數組中的元素。 和對象的某些特征很相似，例如：屬性訪問器一半相似，衍生出的使用 .call() 或者 .apply ...
  • 前端設計模式——享元模式
    享元模式（Flyweight Pattern）：是一種用於優化對象創建和管理的設計模式。它旨在減少記憶體消耗和提高性能，通過共用具有相同狀態的對象來實現這一目標。 具體來說，享元模式涉及兩個主要的對象：享元工廠和具有共用狀態的享元對象。享元工廠負責創建和管理共用對象，以確保每個對象只被創建一次。享元對 ...
一周排行
    -Advertisement-
    Play Games
  • C#自增運算符詳解：++i與i++的區別及應用場景
    概述：在C#中，++i和i++都是自增運算符，其中++i先增加值再返回，而i++先返回值再增加。應用場景根據需求選擇，首碼適合先增後用，尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中，++i 和 i++ 都是自增運算符，但它們在操作上有細微的差異，主要體現在操作的 ...
  • Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET 版本
    上次發佈了：Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET Core 版本，今天計劃準備壓測一下 .NET 版本，來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能，以便後續持續優化改進。 為了方便對比，本文章的電腦環境和測試思路，儘量和... ...
  • 一文讀懂.NET WebAPI中FromRoute、FromQuery、FromBody的關鍵角色與用法
    .NET WebAPI作為一種構建RESTful服務的強大工具，為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時，正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性，如[FromRoute]、[FromQuery]和[FromBody]，用 ...
  • WPF/C#實現圖像濾鏡優化方案：打造炫目視覺體驗！
    原因：我之所以想做這個項目，是因為在之前查找關於C#/WPF相關資料時，我發現講解圖像濾鏡的資源非常稀缺。此外，我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時，會導致CPU的渲染負擔過重。因此，我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • Bogus 實戰：使用 Bogus 和 EFCore 生成模擬數據和種子數據【完整教程】
    引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入，上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試，今天用這個示例來演示一下如何用Bogus創建模擬數據 ，和 EFCore 的種子數據生成 Bogus 的優 ...
  • WPF隨筆收錄-實時繪製心率曲線
    一、前言 在自己的項目中，涉及到實時心率曲線的繪製，項目上的曲線繪製，一般很難找到能直接用的第三方庫，而且有些還是定製化的功能，所以還是自己繪製比較方便。很多人一聽到自己畫就害怕，感覺很難，今天就分享一個完整的實時心率數據繪製心率曲線圖的例子；之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • wpf程式修改啟動入口註意事項
    如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式，但發現 App.xaml 中定義的資源沒有被正確載入，那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣，當你創建 Ap ...
  • 記一次 .NET某爐膛鍋爐檢測系統 崩潰分析
    一：背景 1. 講故事 上個月有個朋友在微信上找到我，說他們的軟體在客戶那邊隔幾天就要崩潰一次，一直都沒有找到原因，讓我幫忙看下怎麼回事，確實工控類的軟體環境複雜難搞，朋友手上有一個崩潰的dump，剛好丟給我來分析一下。 二：WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 一個.NET內置依賴註入的小型強化版
    前言 .NET生態中有許多依賴註入容器。在大多數情況下，微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器，使用很方便。 但是筆者在使用中一直有一個頭疼的問題：服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響，但是內置容器支持註冊開放泛型服 ...
  • WPF隨筆收錄-DataGrid固定右側列
    一、前言 在項目開發過程中，DataGrid是經常使用到的一個數據展示控制項，而通常表格的最後一列是作為操作列存在，比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中，預設只支持固定左側列，這跟大家習慣性操作列放最後不符，今天就來介紹一種簡單的方式實現固定右側列。（這裡的實現方式參考的大佬 ...
所有分類