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

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

news 2026/4/2 16:26:33

文章目录

  • 前言
  • 一、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

3款自动化工具提升文档下载效率：智能识别与批量处理完整指南

3款自动化工具提升文档下载效率&#xff1a;智能识别与批量处理完整指南 【免费下载链接】kill-doc 看到经常有小伙伴们需要下载一些免费文档&#xff0c;但是相关网站浏览体验不好各种广告&#xff0c;各种登录验证&#xff0c;需要很多步骤才能下载文档&#xff0c;该脚本就是…...

编程新知 2026/4/2 16:15:38

3步释放20GB空间：Windows驱动清理神器完全指南

3步释放20GB空间&#xff1a;Windows驱动清理神器完全指南 【免费下载链接】DriverStoreExplorer Driver Store Explorer 项目地址: https://gitcode.com/gh_mirrors/dr/DriverStoreExplorer 驱动管理痛点分析 系统臃肿的隐形杀手 随着电脑使用时间增长&#xff0c;Wi…...

编程新知 2026/4/2 15:12:44

OpenClaw FPGA资源利用率优化深度指南

OpenClaw FPGA资源利用率优化深度指南&#x1f527; 核心价值&#xff1a;OpenClaw实现"资源分析→智能优化→验证→部署"全流程自动化&#xff0c;资源利用率平均提升45%&#xff0c;功耗降低38%&#xff0c;时序性能提升28%&#xff0c;支持Xilinx/Intel FPGA全系列…...

编程新知 2026/4/2 15:02:31

突破安卓HTTPS抓包困境：Xposed+JustTrustMe框架实战指南

1. 为什么HTTPS抓包在安卓上这么难&#xff1f; 最近几年做安全测试的朋友应该深有体会&#xff0c;安卓应用的HTTPS抓包越来越难搞了。我刚开始接触这块时也踩了不少坑&#xff0c;明明在浏览器里能轻松抓到的HTTPS请求&#xff0c;到了APP里就死活抓不到。后来才发现&#xf…...

编程新知 2026/4/2 14:03:33

颠覆黑苹果配置传统：革新式极简EFI生成方案，突破技术壁垒

颠覆黑苹果配置传统&#xff1a;革新式极简EFI生成方案&#xff0c;突破技术壁垒 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 你是否也曾被黑苹果配…...

编程新知 2026/4/2 13:18:29

PP实施经验分享（22）——(ECC版本）生产版本\BOM\工艺路线选择策略与批量大小优化实践

1. ECC版本下生产版本的选择逻辑 在SAP ECC系统中&#xff0c;生产版本的选择逻辑与S4版本存在显著差异。我经历过一个汽车零部件制造项目&#xff0c;当时客户就遇到了生产版本选择混乱的问题。他们原先使用的是S4系统&#xff0c;切换到ECC后发现很多配置需要重新调整。 物料…...

编程新知 2026/4/2 12:42:07

开源工具Cursor Free VIP：突破AI编程限制的高效使用指南

开源工具Cursor Free VIP&#xff1a;突破AI编程限制的高效使用指南 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your t…...

编程新知 2026/4/2 11:40:53

5步打造高效工作流：Super Productivity开源工具新手实战指南

5步打造高效工作流&#xff1a;Super Productivity开源工具新手实战指南 【免费下载链接】super-productivity Super Productivity is an advanced todo list app with integrated Timeboxing and time tracking capabilities. It also comes with integrations for Jira, GitL…...

编程新知 2026/4/2 11:26:42

VVC/VTM编码分析进阶：如何利用DecoderAnalyserApp深度解读CU划分与语法元素

VVC/VTM编码分析进阶&#xff1a;如何利用DecoderAnalyserApp深度解读CU划分与语法元素 在视频编码领域&#xff0c;VVC&#xff08;Versatile Video Coding&#xff09;作为新一代标准&#xff0c;其编码效率相比前代HEVC有显著提升。而VTM&#xff08;VVC Test Model&#xf…...

编程新知 2026/4/2 10:32:08

Qt串口通信避坑指南：用QSerialPort封装类解决粘包拆包（附源码+实战演示）

Qt串口通信实战&#xff1a;从粘包拆包到高可靠数据帧处理的完整解决方案 在嵌入式开发和工业控制领域&#xff0c;串口通信作为最基础却又最关键的通信方式&#xff0c;其稳定性直接影响整个系统的可靠性。许多开发者在使用Qt的QSerialPort进行串口通信时&#xff0c;都曾遇到…...

编程新知 2026/4/2 9:47:28