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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/684187.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[前端开发] CSS基础知识 [上]

下篇:CSS基础知识 [下] CSS基础知识 [上] CSS 学习CSS 引入方式选择器 文字属性盒模型盒模型分类盒模型应用 盒模型单位 CSS 学习 层叠样式表&#xff08;Cascading Style Sheets&#xff0c;缩写为 CSS&#xff09;是一种样式表语言&#xff0c;用来描述 HTML 或 XML&#xf…

文生图提示词:气候特征

天气和气候 --气候特征 Climate Features 气候特征的基本词汇&#xff0c;涵盖了温度和湿度的变化&#xff0c;以及它们在不同气候类型中的体现。 Hot 炎热 Cold 寒冷 Warm 温暖 Cool 凉爽 Humid 湿润 Dry 干燥 Mild 温和 Chilly 冷飕飕 Freezing 冰冻 Sweltering 酷热 Frosty …

RK3568平台开发系列讲解(实验篇)杂项设备驱动实验

🚀返回专栏总目录 文章目录 一、什么是杂项设备驱动二、杂项设备的注册和卸载三、杂项设备驱动实验代码沉淀、分享、成长,让自己和他人都能有所收获!😄 一、什么是杂项设备驱动 在 Linux 中,把无法归类的五花八门的设备定义成杂项设备。相较于字符设备,杂项设备有以下两…

企业数字化转型战略规划与实践:迈向未来的关键之举

在信息技术的不断革新和全球数字化浪潮的推动下&#xff0c;企业数字化转型已经成为当今商业世界中不可或缺的一项战略规划。随着技术的进步&#xff0c;企业必须积极应对数字化转型的挑战&#xff0c;并将其作为发展的关键驱动力。本文将探讨企业数字化转型的重要性&#xff0…

幻兽帕鲁联机服务器搭建新手小白教程

这里分为两种搭建方式&#xff0c;都是采用的一键搭建的傻瓜式教程&#xff0c;1分钟就可以搞定。 一、通过阿里云一键部署幻兽帕鲁服务器 以下教程基于阿里云服务器来搭建幻兽帕鲁游戏服务器&#xff0c;通过一键部署的方式&#xff0c;最快1分钟即可完成部署。 阿里云一键…

【白话前端】一篇文章区分js库和js框架

假定你选择自助游&#xff0c;你需要找不同服务商帮你解决吃住行的问题&#xff0c;这些服务商就是js库。你也可以选择旅行社&#xff0c;给你全解决&#xff0c;这是js框架。 JavaScript库和框架都是用于简化Web开发的工具&#xff0c;但它们之间有一些区别。 JavaScript库&a…

【Java多线程】Thread类的基本用法

目录 Thread类 1、创建线程 1.1、继承 Thread&#xff0c;重写run 1.2、实现 Runnable&#xff0c;重写run 1.3、使用匿名内部类&#xff0c;继承 Thread&#xff0c;重写run 1.4、使用匿名内部类&#xff0c;实现 Runnable&#xff0c;重写run 1.5、使用 lambda 表达式…

Swift Combine 级联多个 UI 更新,包括网络请求 从入门到精通十六

Combine 系列 Swift Combine 从入门到精通一Swift Combine 发布者订阅者操作者 从入门到精通二Swift Combine 管道 从入门到精通三Swift Combine 发布者publisher的生命周期 从入门到精通四Swift Combine 操作符operations和Subjects发布者的生命周期 从入门到精通五Swift Com…

KMS知识管理系统:一文扫盲,体验为王,落地为皇

知识管理系统是学习型组织的必备&#xff0c;重要性不言而喻&#xff0c;但是往往在执行中不能落地&#xff0c;本位尝试做些KMS的扫盲。 一、KMS是什么 知识管理系统&#xff08;英语&#xff1a;Knowledge management system&#xff09;是一种用于管理和共享企业内部知识的…

如何为你的幻兽帕鲁服务器手动配置虚拟内存或Swap、Zram

其实非常简单&#xff0c;如果是Windows系统服务器的话&#xff0c;直接远程连接到服务器桌面。 连上之后&#xff0c;打开设置&#xff0c;找到“高级系统设置” 可以参考视频教程&#xff1a; 拒绝卡顿&#xff01;幻兽帕鲁服务器内存优化攻略&#xff01; 详细教程地址&…

RedisTemplate重写的一些模板

1.为什么要重写RedisTemplate 我们知道SpringBoot官方给出了2种实例化方式&#xff0c;分别是 RedisTemplate<Object,Object> 和 RedisTemplate<String,String> 这两种或多或少都有一些问题&#xff1b; 1.第一种对key所采用的序列化方式是JdkSerializationRedis…

常用文件命令

文章目录 文件命令文件内容查看catnlmoreless&#xff08;more的plus版&#xff09;headtailod 文件属性操作用户权限常见的权限chownchmodchgrpumask 隐藏属性常见的隐藏属性lsattrchattr 查找文件查看文件类型查找文件位置whichwhereislocatefind 文件操作&#xff08;复制、…

深度学习之梯度下降算法

梯度下降算法 梯度下降算法数学公式结果 梯度下降算法存在的问题随机梯度下降算法 梯度下降算法 数学公式 这里案例是用梯度下降算法&#xff0c;来计算 y w * x 先计算出梯度&#xff0c;再进行梯度的更新 import numpy as np import matplotlib.pyplot as pltx_data [1.0,…

2024 前端面试题(GPT回答 + 示例代码 + 解释)No.21 - No.40

本文题目来源于全网收集&#xff0c;答案来源于 ChatGPT 和 博主&#xff08;的小部分……&#xff09; 格式&#xff1a;题目 h3 回答 text 参考大佬博客补充 text 示例代码 code 解释 quote 补充 quote 上一篇链接&#xff1a;2024 前端面试题&#xff08;GPT回答 示例…

深度学习领域的最新前沿:2024年的关键突破与趋势

文章目录 导言01 深度学习的基本原理和算法1.1 神经网络&#xff08;Neural Networks&#xff09;1.2 前馈神经网络&#xff08;Feedforward Neural Network&#xff09;1.3 反向传播算法&#xff08;Backpropagation&#xff09;1.4 激活函数&#xff08;Activation Function&…

基于HTML5实现动态烟花秀效果(含音效和文字)实战

目录 前言 一、烟花秀效果功能分解 1、功能分解 2、界面分解 二、HTML功能实现 1、html界面设计 2、背景音乐和燃放触发 3、燃放控制 4、对联展示 5、脚本引用即文本展示 三、脚本调用及实现 1、烟花燃放 2、燃放响应 3、烟花canvas创建 4、燃放声音控制 5、实际…

五个编程原则:Rob Pike‘s 5 Rules of Programming

原文 https://users.ece.utexas.edu/~adnan/pike.html Rob Pike’s 5 Rules of Programming Rule 1. You can’t tell where a program is going to spend its time. Bottlenecks occur in surprising places, so don’t try to second guess and put in a speed hack until y…

用函数实现乘法口诀表

用函数实现乘法口诀表 实现一个函数&#xff0c;打印乘法口诀表&#xff0c;口诀表的行数和列数自己指定 如&#xff1a;输入9&#xff0c;输出99口诀表&#xff0c;输出12&#xff0c;输出1212的乘法口诀表。 思路&#xff1a; 1. 设计函数原型&#xff0c;不需要返回值&…

开源图形库Thor Vector Graphics:Paint类, Result、 CompositeMethod、 BlendMethod 枚举类型

0. 简介 开源图形库Thor Vector Graphics的Paint类是一个用于绘制图形的API类&#xff0c;提供了各种功能来控制绘制对象的外观和行为。所属头文件&#xff1a;thorvg.h 1. 成员函数与使用方法 Result rotate(float degree) noexcept&#xff1a;设置对象的旋转角度。 使用方…

idea基础配置

配置jre 【file】->【Project Structure】 设置SDK设置Language level 【Settings】->【Build,Execution,Deployment】->【Compiler】->【Java Compiler】设置Project bytecode version&#xff1a; 配置maven 【Settings】->【Build,Execution,Deployment】…