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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類