Vue 的 _render 方法是实例的一个私有方法,它用来把实例渲染成一个虚拟 Node。它的定义在 src/core/instance/render.js 文件中:

Vue.prototype._render = function (): VNode {
const vm: Component = this
const { render, _parentVnode } = vm.$options // reset _rendered flag on slots for duplicate slot check
if (process.env.NODE_ENV !== 'production') {
for (const key in vm.$slots) {
// $flow-disable-line
vm.$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 self
let vnode
try {
vnode = render.call(vm._renderProxy, vm.$createElement)
} catch (e) {
handleError(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 out
if (!(vnode instanceof VNode)) {
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 parent
vnode.parent = _parentVnode
return vnode
}

这段代码最关键的是 render 方法的调用,我们在平时的开发工作中手写 render 方法的场景比较少,而写的比较多的是 template 模板,在之前的 mounted 方法的实现中,会把 template 编译成 render 方法,但这个编译过程是非常复杂的,我们不打算在这里展开讲,之后会专门花一个章节来分析 Vue 的编译过程。

在 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 方法。

总结

vm._render 最终是通过执行 createElement 方法并返回的是 vnode,它是一个虚拟 Node。Vue 2.0 相比 Vue 1.0 最大的升级就是利用了 Virtual DOM。因此在分析 createElement 的实现前,我们先了解一下 Virtual DOM 的概念。

-----------------转自慕课网vue源码解析视频教程的内容-----------------

render(七)的更多相关文章

  1. 模板引擎总结(Thymeleaf,FreeMarker,Enjoy,Velocity,JSP等)

    在java领域,表现层技术主要有以下几种, (1)jsp; (2)freemarker; (3)velocity; (4)thymeleaf; (5)Enjoy; 1.JSP 优点: 1.功能强大,可 ...

  2. CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  3. C#进阶系列——DDD领域驱动设计初探(七):Web层的搭建

    前言:好久没更新博客了,每天被该死的业务缠身,今天正好一个模块完成了,继续来完善我们的代码.之前的六篇完成了领域层.应用层.以及基础结构层的部分代码,这篇打算搭建下UI层的代码. DDD领域驱动设计初 ...

  4. nodejs+phantomjs+七牛 实现截屏操作并上传七牛存储

    近来研究了下phantomjs,只是初涉,还谈不上深入研究,首先介绍下什么是phantomjs. 官网上的介绍是:”PhantomJS is a headless WebKit scriptable ...

  5. 【Cocos游戏实战】功夫小子第七课之游戏主功能场景逻辑功能和暂停功能场景的分析和实现

    CSDN的markdown编辑器是吃屎了么! !.什么玩意.!写了一半写不了东西还全没了,搞个毛线! 本节课的视频教程地址是:第七课在此 假设本教程有帮助到您,希望您能点击进去观看一下,并且如今注冊成 ...

  6. React Native学习(八)—— 对接七鱼客服

    本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...

  7. Django+xadmin打造在线教育平台(七)

    十.授课教师 10.1.讲师列表页 拷贝teacher-list.html和teacher-detail.html到templates目录下 先改teacher-list.html,同样继承base. ...

  8. CRM客户关系管理系统(七)

    第七章.动态modelform功能实现  7.1.动态modelform的实现 (1)给第一列添加一个a标签 kingadmintag.py (2)kingadmin/urls.py urlpatte ...

  9. Django 系列博客(七)

    Django 系列博客(七) 前言 本篇博客介绍 Django 中的视图层中的相关参数,HttpRequest 对象.HttpResponse 对象.JsonResponse,以及视图层的两种响应方式 ...

随机推荐

  1. 10.python内置模块之os模块

    os模块的作用:os 模块提供了非常丰富的方法用来处理文件和目录(管理和维护目录以及文件). os.path模块的作用:主要用于获取文件的属性(管理路径的(物理地址)). 小生总结了一些平时常用到的属 ...

  2. 多字节与Unicode

    编码知识 一.Unicode与多字节(ANSI ) (1)Windows中,Unicode也称为宽字节,多字节也称为窄字节; VS中默认使用Unicode编码,在项目属性>>配置属性> ...

  3. python部署到服务器

    python部署到服务器 linux下的CentOS 7 自带python2.7.5, 使用 python --version 命令查看,因系统需要python2.7.5,因此我们并不卸载,另外安装p ...

  4. Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释

    这篇文章主要介绍了Pythont特殊语法filter,map,reduce,apply使用方法,需要的朋友可以参考下(1)lambda lambda是Python中一个很有用的语法,它允许你快速定义单 ...

  5. python3-cookbook笔记:第六章 数据编码和处理

    python3-cookbook中每个小节以问题.解决方案和讨论三个部分探讨了Python3在某类问题中的最优解决方式,或者说是探讨Python3本身的数据结构.函数.类等特性在某类问题上如何更好地使 ...

  6. 剑指offer-拓展训练-字符的所有组合-全组合

    /* 题目: 给定不含重复字符字符串的全组合. */ /* 思路: 递归法. 例给定abc,输出的组合长度为1,2,3. 对于长度为2的组合,分选择a(ab,ac)和不选择a的情况(bc). 选择a, ...

  7. 自用浏览器的 User-agent 表

    浏览器版本号见请求. 浏览器 User-agent Internet Explorer Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11. ...

  8. 破局AI落地难,数据标注行业需率先变革丨曼孚科技

    ​2019年,国内人工智能领域的投融资热情大幅降低,相当数量的AI企业彻底消失在了历史的长河中,“人工智能寒潮已至”甚至成为行业年度热词. 与前几年创业与投资热情齐头并进的盛况相比,近段时间的AI行业 ...

  9. 同一服务器下发布两个不同网站(war包)的方法(这里采用的是二级域名的方法)

    这里是在阿里云服务器的上部署 在本地测试好之后,打包,然后发到服务器上的tomcat的webapp目录上(这个可能会有个bug,先启动下服务器,然后关掉,再启动,那个war包对应的文件才会出来) 这里 ...

  10. JavaSE学习笔记(2)---面向对象基础

    JavaSE学习笔记(2)---面向对象基础 1.面向对象具有三大特征:封装性.继承性和多态性,而面向过程没有继承性和多态性,并且面向过程的封装只是封装功能,而面向对象可以封装数据和功能.所以面向对象 ...