Jinuss's blog Jinuss's blog
首页
  • 源码合集

    • Leaflet源码分析
    • Openlayers源码合集
    • vue3源码
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • 学习
  • 实用技巧
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

东流

Web、WebGIS技术博客
首页
  • 源码合集

    • Leaflet源码分析
    • Openlayers源码合集
    • vue3源码
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • 学习
  • 实用技巧
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • reactivity响应式

  • runtime-core运行时核心模块

    • watch和watcherEffect源码解析
    • scheduler调度器
    • directive自定义指令实现原理
    • provide依赖和inject注入详解
    • 生命周期函数Lifecycle解析
    • 渲染器renderer源码解析
      • 概览
      • 源码解析
    • patch方法详解
    • patch中组件的挂载解析
    • patch中组件的更新解析
    • patch中DOM元素的挂载解析
    • patchDOM元素的更新解析
    • patch中的双端比较快速算法
  • runtime-dom运行时DOM模块

  • 5.18源码学习》
  • runtime-core运行时核心模块
东流
2025-09-15
目录

渲染器renderer源码解析

# 概览

# 源码解析

function createRenderer(options){
  return baseCreateRenderer(options)
}

function baseCreateRenderer(options,createHydrationFns){
  const target = shared.getGlobalThis();
  target.__VUE__ = true;
  let isFlushing = false;
  const render=(vnode,container,namespace)=>{
   if(vnode == null){
     if(container._vnode){
       unmount(container._vnode,null,null,true) 
     }    
   }else{
     patch(container._vnode||null,vnode,container,null,null,null,namespace)
   }
   container._vnode = vnode;
   if(!isFlushing){
      isFlushing = true;
      flushPreFlushCbs();
      flushPostFlushCbs();
      isFlushing = false;  
   }
  }

  return {
    render,
    hydrate,
    createApp:createAppAPI(render,hydrate)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
编辑 (opens new window)
上次更新: 2025/09/22, 10:14:36
生命周期函数Lifecycle解析
patch方法详解

← 生命周期函数Lifecycle解析 patch方法详解→

最近更新
01
patch中的双端比较快速算法
09-25
02
patchDOM元素的更新解析
09-25
03
patch中DOM元素的挂载解析
09-25
更多文章>
Theme by Vdoing | Copyright © 2024-2025 东流 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式