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
  • Dapr Outbox 執行流程
    Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程，Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor，topic=orders 本文前提知識：熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • Advanced .Net Debugging 7：托管堆與垃圾收集
    引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識，這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示，用於衡量代碼被測試覆蓋的程度，幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率（Line Coverage）、分支覆蓋率（Bra ...
  • C#S7.NET實現西門子PLCDB塊數據採集的完整步驟
    前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫，記錄了使用電腦模擬，模擬PLC，自至完成測試的詳細流程，並重點介紹了在這個過程中的易錯點，供參考。 用到的軟體： 1.Windows環境下鏈路層網路訪問的行業標準工具（WinPcap_4_1_3.exe）下載鏈接：http ...
  • WPF控制項：密碼框綁定MVVM
    從依賴倒置原則（Dependency Inversion Principle, DIP）到控制反轉（Inversion of Control, IoC）再到依賴註入（Dependency Injection, DI）的演進過程，我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • Python中的私有屬性與私有方法
    關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制，這與其他面相對對象語言有區別。關於私有屬性和私有方法，有如下要點： 1、通常我們約定，兩個下劃線開頭的屬性是私有的（private）。其他為公共的（public）； 2、類內部可以訪問私有屬性（方法）； 3、類外 ...
  • C++ 訪問說明符詳解：封裝數據，控制訪問，提升安全性
    C++ 訪問說明符 訪問說明符是 C++ 中控制類成員（屬性和方法）可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符： public：允許從類外部的任何地方訪問成員。 private：僅允許在類內部訪問成員。 protected：允許在類內部及其派生類中訪問成員。 示 ...
  • static_cast與dynamic_cast到底是什麼？
    寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先，【static_cast，dynamic_cast】【父類指針，子類指針】，兩兩一組，共有4種組合：用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • C語言數據結構：雙向鏈表的增刪操作
    /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • @ComponentScan註解的實現，Spring掃描包的過程
    相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage，將包下的類按照一定規則註冊成Be ...
  • opensips開啟python支持
    操作系統 ：CentOS 7.6_x64 opensips版本： 2.4.9 python版本：2.7.5 python作為腳本語言，使用起來很方便，查了下opensips的文檔，支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...
所有分類