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
  • GoF之工廠模式
    GoF之工廠模式 @目錄GoF之工廠模式每博一文案1. 簡單說明“23種設計模式”1.2 介紹工廠模式的三種形態1.3 簡單工廠模式（靜態工廠模式）1.3.1 簡單工廠模式的優缺點:1.4 工廠方法模式1.4.1 工廠方法模式的優缺點:1.5 抽象工廠模式1.6 抽象工廠模式的優缺點：2. 總結:3 ...
  • dotnet C# 簡單的追加文件夾到 ZipArchive 壓縮文件的方法
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • Elasticsearch 系列（六）- ES數據同步和ES集群
    本章將和大家分享ES的數據同步方案和ES集群相關知識。廢話不多說，下麵我們直接進入主題。 一、ES數據同步 1、數據同步問題 Elasticsearch中的酒店數據來自於mysql資料庫，因此mysql數據發生改變時，Elasticsearch也必須跟著改變，這個就是Elasticsearch與my ...
  • 自動化測試數據生成：Asp.Net Core單元測試利器AutoFixture詳解
    引言 在我們之前的文章中介紹過使用Bogus生成模擬測試數據，今天來講解一下功能更加強大自動生成測試數據的工具的庫"AutoFixture"。 什麼是AutoFixture? AutoFixture 是一個針對 .NET 的開源庫，旨在最大程度地減少單元測試中的“安排（Arrange）”階段，以提高 ...
  • .NET Emit 入門教程：第七部分：實戰項目1：將 DbDataReader 轉實體
    經過前面幾個部分學習，相信學過的同學已經能夠掌握 .NET Emit 這種中間語言，並能使得它來編寫一些應用，以提高程式的性能。隨著 IL 指令篇的結束，本系列也已經接近尾聲，在這接近結束的最後，會提供幾個可供直接使用的示例，以供大伙分析或使用在項目中。 ...
  • Windows下綁定線程到指定的CPU核心
    當從不同來源導入Excel數據時，可能存在重覆的記錄。為了確保數據的準確性，通常需要刪除這些重覆的行。手動查找並刪除可能會非常耗費時間，而通過編程腳本則可以實現在短時間內處理大量數據。本文將提供一個使用C# 快速查找並刪除Excel重覆項的免費解決方案。 以下是實現步驟： 1. 首先安裝免費.NET ...
  • mORMot 1.18 第07章 簡單的讀寫操作
    C++ 異常處理 C++ 異常處理機制允許程式在運行時處理錯誤或意外情況。它提供了捕獲和處理錯誤的一種結構化方式，使程式更加健壯和可靠。 異常處理的基本概念： 異常: 程式在運行時發生的錯誤或意外情況。 拋出異常: 使用 throw 關鍵字將異常傳遞給調用堆棧。 捕獲異常: 使用 try-catch ...
  • mORMot 1.18 第06章 概念
    優秀且經驗豐富的Java開發人員的特征之一是對API的廣泛瞭解，包括JDK和第三方庫。 我花了很多時間來學習API，尤其是在閱讀了Effective Java 3rd Edition之後 ，Joshua Bloch建議在Java 3rd Edition中使用現有的API進行開發，而不是為常見的東西編 ...
  • php 開發規範
    框架 · 使用laravel框架，原因：tp的框架路由和orm沒有laravel好用 · 使用強制路由，方便介面多時，分多版本，分文件夾等操作 介面 · 介面開發註意欄位類型，欄位是int，查詢成功失敗都要返回int（對接java等強類型語言方便） · 查詢介面用GET、其他用POST 代碼 · 所 ...
  • 2024 年 4 月 28 日 周日 晴 熱（1253 字）
    正文 下午找企業的人去鎮上做貸後。 車上聽同事跟那個司機對罵，火星子都快出來了。司機跟那同事更熟一些，連我在內一共就三個人，同事那一手指桑罵槐給我都聽愣了。司機也是老社會人了，馬上聽出來了，為那個無辜的企業經辦人辯護，實際上是為自己辯護。 “這個事情你不能怪企業。”“但他們總不能讓銀行的人全權負責， ...
所有分類