Vue.js 技术揭秘学习（3） render

Vue 的 _render 方法是实例的一个私有方法，它用来把实例渲染成一个虚拟 Node ,返回的是一个VNode

在 Vue 的官方文档中介绍了 render 函数的第一个参数是 createElement，那么结合之前的例子：

<div id="app"> {{ message }} </div>

相当于我们编写如下 render 函数：

render: function (createElement) { return createElement('div', { attrs: { id: 'app' }, }, this.message) }

再回到 _render 函数中的 render 方法的调用：

vnode = render.call(vm._renderProxy, vm.$createElement)

可以看到，render 函数中的 createElement 方法就是 vm.$createElement 方法：

export function initRender (vm: Component) { // ... // bind the createElement fn to this instance // so that we get proper render context inside it. // args order: tag, data, children, normalizationType, alwaysNormalize // internal version is used by render functions compiled from templates vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false) // normalization is always applied for the public version, used in // user-written render functions. vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true) }

实际上，vm.$createElement 方法定义是在执行 initRender 方法的时候，可以看到除了 vm.$createElement 方法，还有一个 vm._c 方法，它是被模板编译成的 render 函数使用，而 vm.$createElement 是用户手写 render 方法使用的，这俩个方法支持的参数相同，并且内部都调用了 createElement 方法。

#总结

转载于:https://www.cnblogs.com/guangzhou11/p/11298032.html

Vue.js 技术揭秘学习（3） render相关推荐

Vue.js 技术揭秘学习（2） Vue 实例挂载的实现
Vue 中我们是通过 $mount 实例方法去挂载 vm 的 $mount 方法实际上会去调用 mountComponent 方法,mountComponent 核心就是先实例化一个渲染Watcher ...
Vue.js 技术揭秘学习（1） new Vue 发生了什么
Vue 初始化主要就干了几件事情,合并配置,初始化生命周期,初始化事件中心,初始化渲染,初始化 data.props.computed.watcher 等等. 转载于:https://www.cnbl ...
Vue.js 技术揭秘
hello, 小伙伴们大家好今天给大家分享的开源项目是Vue.js源码解析,如果有学前端的小伙伴可以浏览一下这个开源项目.目前改项目在GitHub上已经有4700多start. 目前有社区有很多 Vu ...
Vue 3 技术揭秘
作者介绍 muwoo,前端技术专家.曾就职于蚂蚁集团,之前对 Vue 2.x 源码有过深层次的研究和探索,并在 Github 上开源了相关的技术文章:Vue 2.x 技术揭秘,目前已有超过 2k+ s ...
从后端看Vue-读《Vue.js技术内幕》
众所周知,作为一名后端懂些Vue.js,是加分项. Vue.js有诸多优点.Vue.js不必为复杂的webpack配置而担心,可以从CDN上下载并使用模板来构建组件.而且在开发中,Vue.js还通过对 ...
推荐一本Vue源码阅读书籍《Vue.js技术内.幕》
1. 概述这幅图大家应该都很清楚: 但这个过程在Vue框架中是如何实现的呢? 是否考虑过如果是自己,该如何设计呢?而这本<Vue.js技术内幕>就是一本非常好的关于Vue框架源码学习的书 ...
Vue.js入门（学习笔记）
说在前头: 本人为大三在读学生,书写文章的目的是为了对自己掌握的知识和技术进行一定的记录,同时乐于与大家一起分享,因本人资历尚浅,发布的文章难免存在一些错漏之处,还请阅读此文章的大牛们见谅与斧正.若在 ...
对vue.js技术调研
一. Vue.js是什么 Vue.js (vue读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架.与其它大型框架不同的是,Vue 被设计为可以自底向上 ...
《Vue.js技术内幕》读后感
作为一个 "成熟" 的前端开发,Vue框架是必须熟练掌握的,因为之前学习过黄轶老师慕课网Vue2的源码课<Vue技术揭秘>,大概刷了两遍,真的是受益匪浅,学到了太多,后 ...

Vue.js 技术揭秘学习（3） render

#总结

Vue.js 技术揭秘学习（3） render相关推荐

最新文章

热门文章

Vue.js 技术揭秘学习 （3） render

#总结

Vue.js 技术揭秘学习 （3） render相关推荐

最新文章

热门文章

Vue.js 技术揭秘学习（3） render

Vue.js 技术揭秘学习（3） render相关推荐