Vue2源码梳理:render函数的实现
render
- 在 $mount 时,会调用 render 方法
- 在写 template 时,最终也会转换成 render 方法
- Vue 的 _render 方法是实例的一个私有方法,它用来把实例渲染成一个虚拟 Node
- 它的定义在 src/core/instance/render.js 文件中,它返回的是一个vnode
- 这里看下它的实现
Vue.prototype._render = function (): VNode {const vm: Component = this// 从 $options 中拿到这个 render 函数// 这个 render 函数, 可以是用户自己写,也可以通过编译生成const { render, _parentVnode } = vm.$options// 跳过// reset _rendered flag on slots for duplicate slot checkif (process.env.NODE_ENV !== 'production') {for (const key in vm.$slots) {// $flow-disable-linevm.$slots[key]._rendered = false}}// 跳过if (_parentVnode) {vm.$scopedSlots = _parentVnode.data.scopedSlots || emptyObject}// 跳过// set parent vnode. this allows render functions to have access// to the data on the placeholder node.vm.$vnode = _parentVnode// render selflet vnodetry {// call的第一个参数是当前上下文, vm._renderProxy 在生产环境下,就是 VM,也就是this本身, 在开发环境它可能是一个proxy对象 // 这个 vm.$createElement 也是一个函数,会在下面来说// 总体来说就是生成 vnodevnode = render.call(vm._renderProxy, vm.$createElement)} catch (e) {// 捕获并处理错误,尝试再次生成 vnodehandleError(e, vm, `render`)// return error render result,// or previous vnode to prevent render error causing blank component/* istanbul ignore else */if (process.env.NODE_ENV !== 'production') {if (vm.$options.renderError) {try {vnode = vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e)} catch (e) {handleError(e, vm, `renderError`)vnode = vm._vnode}} else {vnode = vm._vnode}} else {vnode = vm._vnode}}// return empty vnode in case the render function errored outif (!(vnode instanceof VNode)) {// 如果拿到的 vnode 是个数组,说明模板有多个根节点,这个在后续vue3中支持,在vue2中会报下面的警告// 在vue2 中 vnode 是一个 vdom, if (process.env.NODE_ENV !== 'production' && Array.isArray(vnode)) {warn('Multiple root nodes returned from render function. Render function ' +'should return a single root node.',vm)}vnode = createEmptyVNode()}// set parentvnode.parent = _parentVnodereturn vnode }- 注意,上面的 vm.$createElement 在 initRender 函数中被初始化定义
- 而 initRender 是在一开始 new Vue 的时候,会调用 _init 函数中被执行
// initRender 函数中 vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false) vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)- 看到上面两个函数区别,就是最后一个参数不一样
_c这个函数它实际上是被编译生成的render函数所使用的一个方法$createElement是给我们手写render函数提供了一个创建vnode的一个方法var app = new Vue({el: '#app',// 手写 render 函数render(createElement) {return createElement('div', {attrs: {id: 'app2' // 这些写后,这里挂载的 div 元素,会替换掉之前的 #app 容器}}, this.message)},data() {return {message: 'Hello'}} })- 这里,使用render和在html中写是不一样的,它没有一个把从差值变换的这个过程
- 之前的写法是在HTML里面定义了这个差值
// 之前的写法 <div id="app">{{ message }} </div> - 它在不执行vue的时候,它会先把这个东西渲染出来
- 然后在new vue之后, 执行 mount 的时候,再把它从差值的那个message给替换成真实的数据
- 在这里是通过纯 render 函数,当它执行完毕以后,直接挂载到页面上,这样的话体验会更好一点
- 因为这里手写了 render 函数,所以, 整个渲染流程中,就不会再执行把 template 转换 render 函数那一步了
- 所以就相当于直接就达到了一样的效果
vm._renderProxy的定义,也是发生在 src/core/instance/init.js 中- 在 _init 函数中,有一个判断
/* istanbul ignore else */ if (process.env.NODE_ENV !== 'production') {initProxy(vm) } else {vm._renderProxy = vm }- 当前如果说是生产环境,
vm._renderProxy = vm - 开发阶段开发阶段,则执行
initProxy(vm)定义在 src/core/instance/proxy.js 中// 报错提示函数 const warnNonPresent = (target, key) => {warn(`Property or method "${key}" is not defined on the instance but ` +'referenced during render. Make sure that this property is reactive, ' +'either in the data option, or for class-based components, by ' +'initializing the property. ' +'See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.',target) } // const hasHandler = {has (target, key) {const has = key in targetconst isAllowed = allowedGlobals(key) || (typeof key === 'string' && key.charAt(0) === '_' && !(key in target.$data)) // 全局方法或者私有方法,或不在$data中// 属性不在 target 下,并且不被允许,则报错提示,比如:使用了 一个没有在 data 中定义的变量,就会报错if (!has && !isAllowed) {if (key in target.$data) warnReservedPrefix(target, key)else warnNonPresent(target, key)}return has || !isAllowed} }// 判断当前浏览器是否支持 proxy,Proxy作用是对对象的访问做一个劫持 const hasProxy = typeof Proxy !== 'undefined' && isNative(Proxy)initProxy = function initProxy (vm) {if (hasProxy) {// determine which proxy handler to useconst options = vm.$optionsconst handlers = options.render && options.render._withStripped? getHandler: hasHandlervm._renderProxy = new Proxy(vm, handlers) // 在这里 handlers 是 hasHandler} else {vm._renderProxy = vm} } - 这里可以看到,支持 Proxy 则
vm._renderProxy = new Proxy(vm, handlers)
- 当前如果说是生产环境,
- 通过以上分析可知,vm._render 最终是通过执行 createElement 方法并返回的是 vnode
- 而返回的vnode 它是一个虚拟 Node
相关文章:
Vue2源码梳理:render函数的实现
render 在 $mount 时,会调用 render 方法在写 template 时,最终也会转换成 render 方法Vue 的 _render 方法是实例的一个私有方法,它用来把实例渲染成一个虚拟 Node它的定义在 src/core/instance/render.js 文件中,它返回的是一个…...
flask+python企业产品订单管理系统938re
在设计中采用“自下而上”的思想,在创新型产品提前购模块实现了个人中心、个体管理、发布企业管理、投资企业管理、项目分类管理、产品项目管理、个体投资管理、企业投资管理、个体订单管理、企业订单管理、系统管理等的功能性进行操作。最终,对基本系统…...
Vue2源码梳理:关于数据驱动,与new Vue时的初始化操作
数据驱动 1 )概述 vue的一个核心思想,就是数据驱动 所谓数据驱动,就是指视图是由数据驱动生成的 对视图的修改并不会直接操作dom,而是通过修改数据 它相比我们传统的前端开发,如使用 jQuery 的前端库直接去修改 dom…...
【C++航海王:追寻罗杰的编程之路】关于模板,你知道哪些?
目录 1 -> 泛型编程 2 -> 函数模板 2.1 -> 函数模板概念 2.2 -> 函数模板格式 2.3 -> 函数模板的原理 2.4 -> 函数模板的实例化 2.5 -> 函数参数的匹配原则 3 -> 类模板 3.1 -> 类模板的定义格式 3.2 -> 类模板的实例化 1 -> 泛型编…...
分布式springboot 3项目集成mybatis官方生成器开发记录
文章目录 说明实现思路实现步骤第一步:创建generator子模块第二步:引入相关maven插件和依赖第三步:编写生成器配置文件第四步:运行查看结果 说明 该文章为作者开发学习记录,方便以后复习和交流主要内容为:…...
算法学习——LeetCode力扣回溯篇4
算法学习——LeetCode力扣回溯篇4 332. 重新安排行程 332. 重新安排行程 - 力扣(LeetCode) 描述 给你一份航线列表 tickets ,其中 tickets[i] [fromi, toi] 表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。 所有这些机票…...
c++ STL系列——(六)multimap
C标准模板库(STL)是C编程中不可或缺的一部分,它提供了一系列的容器、算法和函数模板,以简化常见的数据结构和算法的实现。在STL中,multimap是一个非常有用的容器,它提供了一种键值对的存储方式,…...
Json-序列化字符串时间格式问题
序列化字符串时间格式问题 一、项目场景二、问题描述三、解决方案 一、项目场景 最近C#中需要将实体进行json序列化,使用了Newtonsoft.Json public static void TestJson(){DataTable dt new DataTable();dt.Columns.Add("Age", Type.GetType("Sys…...
HarmonyOS鸿蒙学习基础篇 - 自定义组件(一)
前言 在ArkUI中,UI显示的内容均为组件,由框架直接提供的称为系统组件,由开发者定义的称为自定义组件。在进行 UI 界面开发时,通常不是简单的将系统组件进行组合使用,而是需要考虑代码可复用性、业务逻辑与UI分离&#…...
开窗,挖槽,放电齿,拼版
我们在阻焊层画线,就相当于去掉绿油阻焊,开窗一般是用在大电流走线的时候。先画要走的导线,之后切换到TopSolder或者Bottom Solder层,然后Place->line 画一条和原来先粗细一样的线即可!但走电流的仍然是导线&#x…...
[Vue的组件通讯.sync修饰]Vue中.sync的使用方法和实现的方式 代码注释
目录 .sync的使用方法1. 在父组件中,将需要传递给子组件的数据使用v-bind绑定到子组件的props中,并在属性名后加上.sync修饰符,如下所示:2. 在子组件中,将需要传递给父组件的数据使用$emit方法触发一个名为update:valu…...
Java 基于springboot+vue在线外卖点餐系统,附源码
博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…...
Decian 12.x基于LNMP安装phpIPAM(IP管理系统)
phpipam是一个开源Web IP地址管理应用程序(IPAM)。其目标是提供轻便,且有用的IP地址管理系统。它是基于PHP的应用程序,具有MySQL数据库后端,使用jQuery库,ajax和HTML5 / CSS3功能。 在Debian 12中&…...
【多模态MLLMs+图像编辑】MGIE:苹果开源基于指令和大语言模型的图片编辑神器(24.02.03开源)
项目主页:https://mllm-ie.github.io/ 论文 :基于指令和多模态大语言模型图片编辑 2309.Guiding Instruction-based Image Editing via Multimodal Large Language Models (加州大学圣巴拉分校苹果) 代码:https://github.com/appl…...
hpp文件:C++开发中的利器
1 什么是hpp文件? hpp文件是C程序中一种特殊头文件,它可以包含类的声明和实现。与传统的h文件相比,hpp文件具有以下特点: 将类的声明和实现放在同一个文件里,减少了代码量,提高了代码的可读性。无需再将c…...
如何查看电脑连接的wifi的密码
问题 很多时候我们电脑连上wifi之后就把密码忘记了,这个时候如果同事问自己密码是多少,如果作为程序员说不知道是不是感觉有点不好意思,哈哈…… 解决 我使用的是windows电脑,就以windows为例说明下自己是如何查看的。 打开wi…...
QTabWidget和QTabBar控件样式设置(qss)
QTabWidget和QTabBar控件样式设置 1、QTabWidget样式可自定义的有哪些示例:效果图 2、QTabBar样式可自定义的有哪些示例效果图 1、QTabWidget样式可自定义的有哪些 QTabWidget::pane{} 定义tabWidgetFrameQTabWidget::tab-bar{} 定义TabBar的位置QTabWidget::tab{}定…...
【智能家居入门3】(MQTT服务器、MQTT协议、微信小程序、STM32)
前面已经写了三篇博客关于智能家居的,服务器全都是使用ONENET中国移动,他最大的优点就是作为数据收发的中转站是免费的。本篇使用专门适配MQTT协议的MQTT服务器,有公用的,也可以自己搭建(应该要钱)…...
C语言第二十四弹---指针(八)
✨个人主页: 熬夜学编程的小林 💗系列专栏: 【C语言详解】 【数据结构详解】 指针 1、数组和指针笔试题解析 1.1、字符数组 1.1.1、代码1: 1.1.2、代码2: 1.1.3、代码3: 1.1.4、代码4: 1…...
m1芯片xcode15编译cocos2dx一些报错处理
报错1: No matching function for call to ‘iconv’ No matching function for call to ‘iconv_close’ 解决: 强转: iconv_close((iconv_t)_iconv); iconv((iconv_t)_iconv, (char**)&pin, &inLen, &pout, &outLen); 报错2: Proper…...
k8s从入门到放弃之Ingress七层负载
k8s从入门到放弃之Ingress七层负载 在Kubernetes(简称K8s)中,Ingress是一个API对象,它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress,你可…...
centos 7 部署awstats 网站访问检测
一、基础环境准备(两种安装方式都要做) bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...
定时器任务——若依源码分析
分析util包下面的工具类schedule utils: ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类,封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz,先构建任务的 JobD…...
将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?
Otsu 是一种自动阈值化方法,用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理,能够自动确定一个阈值,将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...
C++ 基础特性深度解析
目录 引言 一、命名空间(namespace) C 中的命名空间 与 C 语言的对比 二、缺省参数 C 中的缺省参数 与 C 语言的对比 三、引用(reference) C 中的引用 与 C 语言的对比 四、inline(内联函数…...
css的定位(position)详解:相对定位 绝对定位 固定定位
在 CSS 中,元素的定位通过 position 属性控制,共有 5 种定位模式:static(静态定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)和…...
unix/linux,sudo,其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例,模拟20个网页的爬取,每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程:允许程序同时执行多个任务,提高IO密集型任务(如网络请求)的效率…...
微信小程序云开发平台MySQL的连接方式
注:微信小程序云开发平台指的是腾讯云开发 先给结论:微信小程序云开发平台的MySQL,无法通过获取数据库连接信息的方式进行连接,连接只能通过云开发的SDK连接,具体要参考官方文档: 为什么? 因为…...
自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元(GRU)长短期记忆神经网络(LSTM)…...
