当前位置： 首页 > news >正文

vue源码分析（五）——vue render 函数的使用

news 2026/5/23 6:11:30

文章目录

  • 前言
  • 一、render函数
    • 1、render函数是什么？
  • 二、render 源码分析
    • 1.执行initRender方法
    • 2.vm._c 和 vm.$createElement 调用 createElement 方法详解
      • （1）区别
      • （2）代码
    • 3、原型上的_render方法
      • （1）renderProxy方法
      • （2）initProxy方法
        • ①执行initProxy的时机
        • ②initProxy的详细说明
        • ③warnNonPresent警告方法的示例（故意将message 写错为message1）
  • 总结

前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、render函数

1、render函数是什么？

官网介绍：https://v2.cn.vuejs.org/v2/api/#render
简单概括就是 _render 是vue 的一个私有方法，作用是把一个实例编程虚拟Node。
在这里插入图片描述

二、render 源码分析

路径：src\core\instance\render.ts

1.执行initRender方法

在init初始化方法中执行initRender(vm)方法，也就是把vm传入， 执行initRender初始化render方法。

在这里插入图片描述

2.vm._c 和 vm.$createElement 调用 createElement 方法详解

（1）区别

区别：
vm._c：被编译生成的render函数 所使用的方法。
vm.$createElement：给手写render函数提供一个创建vnode的方法。

在这里插入图片描述

（2）代码

通过render函数将数据渲染到视图上

import Vue from 'vue'var app = new Vue({el: '#app',render(h) {return h('div', {attrs: {id: 'app1'}}, this.message)},data() {return {message: '我是一个双向绑定的数据'}}
})

在这里插入图片描述

3、原型上的_render方法

（1）renderProxy方法

renderProxy：就是在init.ts初始化的时候判断，是生产环境的时候将vm复制给renderProxy。
在这里插入图片描述

（2）initProxy方法

initProxy：就是在init.ts初始化的时候判断，是开发环境的时候执行的方法。
路径： src\core\instance\proxy.ts

①执行initProxy的时机

在这里插入图片描述

②initProxy的详细说明

在这里插入图片描述

③warnNonPresent警告方法的示例（故意将message 写错为message1）

其实有很多这样的方法，这边挑一个常见的说明一下

// main.js vue2项目中
import Vue from 'vue'var app = new Vue({el: '#app',data() {return {message: '我是一个双向绑定的数据'}}
})// index.html
<body><div id="app">{{message1}}</div></body>

在这里插入图片描述

总结

对vue 中 render 函数的简单说明

相关文章：

vue源码分析（五）——vue render 函数的使用

文章目录 前言一、render函数1、render函数是什么&#xff1f; 二、render 源码分析1.执行initRender方法2.vm._c 和 vm.$createElement 调用 createElement 方法详解&#xff08;1&#xff09;区别&#xff08;2&#xff09;代码 3、原型上的_render方法&#xff08;1&#xf…...

编程日记 2023/10/29 14:45:59

Maven第三章：IDEA集成与常见问题

Maven第三章：IDEA集成与常见问题 前言 本章内容重点：了解如何将Maven集成到IDE（如IntelliJ IDEA或Eclipse）中，以及使用过程中遇到的常见的问题、如何解决，如何避免等，可以大大提高开发效率。 IEAD导入Maven项目 File ->Open 选择上一章创建的Maven项目 my-app查看po…...

编程日记 2023/10/29 14:43:57

数据结构—线性实习题目（二）5迷宫问题（栈）

迷宫问题&#xff08;栈&#xff09; #include <iostream>​ #include <assert.h> using namespace std;int qi1, qi2; int n; int m1, p1; int** Maze NULL; int** mark NULL;struct items {int x, y, dir; };struct offsets {int a, b;char* dir; };const int…...

编程日记 2023/10/29 14:40:54

Nginx 的配置文件（负载均衡，反向代理）

Nginx可以配置代理多台服务器&#xff0c;当一台服务器宕机之后&#xff0c;仍能保持系统可用。 cmd查找端口是否使用&#xff1a;netstat -ano Nginx出现403 forbidden #解决办法&#xff1a;修改web目录的读写权限&#xff0c;或者是把nginx的启动用户改成目录的所属用户&…...

编程日记 2023/10/29 14:39:53

项目管理49个过程定义与作用、五大过程组

五大过程组&#xff1a; 49个过程的定义与作用&#xff1a; 1.整合管理&#xff1a; (1)制定项目章程&#xff1a;制定项目章程是编写一份正式批准项目并授予项目经理权力的文件的过程&#xff0c;其作用是①确立组织与项目的关系&#xff1b;②展示组织对项目的承诺&#xff…...

编程日记 2023/10/29 14:38:52

MySQL篇---第六篇

系列文章目录 文章目录 系列文章目录一、 MySQL 中 varchar 与 char 的区别？varchar(30) 中的 30代表的涵义？二、 int(11) 中的 11 代表什么涵义？三、为什么 SELECT COUNT(*) FROM table 在 InnoDB 比MyISAM 慢？一、 MySQL 中 varchar 与 char 的区别？varchar(30) 中的 30…...

编程日记 2023/10/29 14:37:51

QA新人入职任务

一、背景 分享记录一下入职新公司后&#xff0c;新人第一周接到的新手任务&#xff0c;回顾总结&#xff0c;方便自己成长和思考~ 二、新人任务说明 题目1&#xff1a;接口相关 题目2&#xff1a;UI相关 UI原型图 三、任务要求 1、根据题目2原型图&#xff0c;进行UI测试…...

编程日记 2023/10/29 14:36:49

更新电脑显卡驱动的操作方法有哪些?

更新显卡驱动可以有效的提升我们电脑的性能&#xff0c;可以通过设备管理器、显卡驱动软件等方式进行检查驱动是否需要更新&#xff0c;并修复一些电脑上已知的显卡问题。 然而&#xff0c;对于一些不是很懂电脑技术的人员来说&#xff0c;更新电脑显卡驱动是一件比较复杂和混乱…...

编程日记 2023/10/29 14:35:47

[Docker]三.Docker 部署nginx,以及映射端口,挂载数据卷

一.Docker 部署 Nginx 以及端口映射 Docker 部署 Nginx,首先需要下载nginx镜像,然后启动这个镜像,就运行了一个nginx的容器了 1.下载 nginx 镜像并启动容器 #查看是否存在nginx镜像:发现没有nginx镜像 [rootlocalhost zph]# docker images | grep nginx#下载nginx镜像 [rootl…...

编程日记 2023/10/29 14:34:45

【0基础学Java第三课】-- 运算符

3. 运算符 3.1 什么是运算符3.2 算术运算符3.2.1 **基本四则运算符&#xff1a;加减乘除模( - * / %&#xff09;**3.2.2 增量运算符 - * %3.2.3 自增/自减运算符 -- 3.3 关系运算符3.4逻辑运算符(重点)3.4.1 逻辑与 &&3.4.2 逻辑 ||3.4.3逻辑非 !3.4.4 短路求值 3.5 …...

编程日记 2023/10/29 14:33:43

unocss和tailwindcss css原子引擎

第一种tailwindcss&#xff1a; tailwindcss官网 https://tailwindcss.com/docs/grid-column 基本介绍及优点分析 Tailwind CSS 中文文档 - 无需离开您的HTML&#xff0c;即可快速建立现代网站 PostCss 处理 Tailwind Css 基本流程 PostCSS - 是一个用 JavaScript 工具和插…...

编程日记 2023/10/29 14:32:43

HIT_OS_LAB1 调试分析 Linux 0.00 引导程序

操作系统实验一 姓名&#xff1a;董帅学号&#xff1a;2021111547班级&#xff1a;21R0312 1.1 实验目的 熟悉实验环境掌握如何手写Bochs虚拟机的配置文件掌握Bochs虚拟机的调试技巧掌握操作系统启动的步骤 1.2 实验内容 1.2.1 掌握如何手写Bochs虚拟机的配置文件 boot: f…...

编程日记 2023/10/29 14:31:41

C语言每日一题（18）数组匹配

牛客网 BC156 牛牛的数组匹配 题目描述 描述 牛牛刚学会数组不久&#xff0c;他拿到两个数组 a 和 b&#xff0c;询问 b 的哪一段连续子数组之和与数组 a 之和最接近。 如果有多个子数组之和同样接近&#xff0c;输出起始点最靠左的数组。 输入描述&#xff1a; 第一行输…...

编程日记 2023/10/29 14:30:39

redroid11 集成 nvidia gpu hals

前言 此篇文章中使用 nvidia 相关aosp 库、510.155_Android_R_aarch64_release文件来于原厂提供基础资料&#xff0c;可供 aosp 移植库基本思路。 本文记录 redroid11(aosp11) 集成 nvidia gpu 驱动库、 nvidia_omx 驱动库实践记录&#xff0c;以作备忘。 1>. Apply the p…...

编程日记 2023/10/29 14:29:38

在 Visual Studio 中远程调试 C++ 项目

目录 一、说明二、下载远程工具1. 官网下载2. 自己电脑上拷贝 三、 运行远程工具四、本机Visual Studio配置五、自动部署 一、说明 参考官方文档&#xff1a;https://learn.microsoft.com/zh-cn/visualstudio/debugger/remote-debugging-cpp?viewvs-2022 二、下载远程工具 …...

编程日记 2023/10/29 14:28:37

AAOS CarMediaService 问题分析

文章目录 问题描述车载蓝牙音乐流程Music 监听焦点变化流程BT请求焦点的流程MediaSession 服务端的流程BT和music 之间的相互影响 问题描述 问题 AAOS界面连接蓝牙的情况下&#xff0c;Music应用播放音乐会暂停。 分析 暂停是应用的行为&#xff0c;Music应用会监听focus的变化…...

编程日记 2023/10/29 14:27:35

06-Flask-蓝图的使用

蓝图的使用 前言蓝图使用方式 前言 本篇来学习下Flask中蓝图的使用 蓝图 在Flask中使用蓝图(Blurprint)来分模块组织管理蓝图可以理解为存储一组视图方法的容器对象&#xff0c;特点如下&#xff1a; 一个应用可以具有多个Blueprint可以将一个Blueprint注册到任何一个未使用…...

编程日记 2023/10/29 14:26:34

【LeetCode力扣】189 53 轮转数组 | 最大子数组和

目录 1、189. 轮转数组 1.1、题目介绍 1.2、解题思路 2、53. 最大子数组和 2.1、题目介绍 2.2、解题思路 1、189. 轮转数组 1.1、题目介绍 原题链接&#xff1a;189. 轮转数组 - 力扣&#xff08;LeetCode&#xff09; ​ 示例 1: 输入: nums [1,2,3,4,5,6,7], k 3输…...

编程日记 2023/10/29 14:25:33

Go学习第十七章——Gin中间件与路由

Go web框架——Gin中间件与路由 1 单独注册中间件1.1 入门案例1.2 多个中间件1.3 中间件拦截响应1.4 中间件放行 2 全局注册中间件3 自定义参数传递4 路由分组4.1 入门案例4.2 路由分组注册中间件4.3 综合使用 5 使用内置的中间件6 中间件案例权限验证耗时统计 1 单独注册中间件…...

编程日记 2023/10/29 14:24:29

真实感渲染的非正式调研与近期热门研究分享

真实感渲染的非正式调研与近期热门研究分享 1 期刊1 Top2 Venues 2 Rendering Reserach1 Material2 BRDF3 Appearance Modeling4 Capture5 Light Transport光线传播6 Differetiable Rendring-可微渲染7 Ray Tracing8 Denoising降噪9 NeRF 3 VR/AR4 Non-Photorealistic Renderin…...

编程日记 2023/10/29 14:23:26

避坑指南：在Quartus II里搞定矩阵键盘与数码管，这些细节决定成败（附代码）

Quartus II实战避坑&#xff1a;矩阵键盘与数码管调试的七个致命细节 第一次在FPGA上实现矩阵键盘控制数码管显示时&#xff0c;我遇到了所有初学者都会踩的坑——按下按键后数码管要么毫无反应&#xff0c;要么显示乱码。这不是代码逻辑问题&#xff0c;而是那些教程里从不提及…...

编程新知 2026/5/23 5:33:59

MQTTClient技术深度解析：嵌入式物联网通信的高性能解决方案

MQTTClient技术深度解析&#xff1a;嵌入式物联网通信的高性能解决方案 【免费下载链接】mqttclient A high-performance, high-stability, cross-platform MQTT client, developed based on the socket API, can be used on embedded devices (FreeRTOS / LiteOS / RT-Thread …...

编程新知 2026/5/23 4:55:52

DECO项目架构解析：从源码理解装饰器并发模型的设计哲学

DECO项目架构解析&#xff1a;从源码理解装饰器并发模型的设计哲学 【免费下载链接】deco 项目地址: https://gitcode.com/gh_mirrors/de/deco DECO&#xff08;Decorated Concurrency&#xff09;是一个革命性的Python并行计算框架&#xff0c;它通过装饰器实现了简洁…...

编程新知 2026/5/23 4:44:02

终极网页资源下载神器：ResourcesSaverExt完整操作指南

终极网页资源下载神器&#xff1a;ResourcesSaverExt完整操作指南 【免费下载链接】ResourcesSaverExt Chrome Extension for one click downloading all resources files and keeping folder structures. 项目地址: https://gitcode.com/gh_mirrors/re/ResourcesSaverExt …...

编程新知 2026/5/23 4:36:49

混合参数化量子态(HPQS)在量子机器学习中的应用与优化

1. 混合参数化量子态&#xff08;HPQS&#xff09;框架解析量子机器学习在NISQ&#xff08;Noisy Intermediate-Scale Quantum&#xff09;时代面临两大核心挑战&#xff1a;参数化量子电路&#xff08;PQC&#xff09;因有限测量次数导致的统计不确定性&#xff0c;以及神经量…...

编程新知 2026/5/23 4:02:40

Codex入门15-命令速查（实用工具：全部命令和快捷键一网打尽，打印贴墙上）

Codex入门15-命令速查（实用工具：全部命令和快捷键一网打尽，打印贴墙上） 📌 文章简介：这是一篇你一定要收藏的"字典文章"。本文把 Codex CLI 的所有交互式斜杠命令、命令行参数、键盘快捷键、环境变量整理成清晰的表格——打印出来贴墙上，随查随用。每条命令都…...

编程新知 2026/5/23 2:47:51

论软件系统建模方法及其应用——以飞秒激光加工控制系统为例

摘要 2024年1月，我参与了某精密制造企业“高精度飞秒激光加工控制系统”项目的研发，担任系统架构设计师，主要负责系统建模、核心模块设计与集成测试。该项目旨在开发一套用于航空叶片微孔加工的数控系统，要求实现1μm的定位精度、实时补偿与工艺自适应调整。系统具有强实时…...

编程新知 2026/5/23 2:25:03

哈尔滨除甲醛本地推荐

新房装修完工本是喜事&#xff0c;但刺鼻异味与甲醛却令人困扰。哈尔滨冬季供暖期长&#xff0c;室内密闭时间长&#xff0c;甲醛释放周期可达3-15年&#xff0c;仅靠通风难以根除。许多业主在除甲醛时踩坑&#xff1a;要么找了不靠谱的游击队治理无效&#xff0c;要么被低价套…...

编程新知 2026/5/23 1:50:21

Gemini3.1Pro编程项目什么时候该用什么时候不该用

概要Gemini 3.1 Pro是Google DeepMind于2026年2月推出的旗舰级多模态大语言模型。在编程和项目管理场景中&#xff0c;它最核心的价值不是"替代程序员写代码"&#xff0c;而是在特定环节——需求分析、架构设计初稿、代码审查、Bug定位、技术文档生成、项目进度整理—…...

编程新知 2026/5/23 1:22:25

实测taotoken在不同时段api调用的响应延迟与稳定性表现

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 实测taotoken在不同时段api调用的响应延迟与稳定性表现 对于依赖大模型API进行开发的团队而言&#xff0c;服务的响应延迟与稳定性…...

编程新知 2026/5/23 1:01:18