vue.js 源代码学习笔记 ----- instance render
/* @flow */ import {
warn,
nextTick,
toNumber,
_toString,
looseEqual,
emptyObject,
handleError,
looseIndexOf
} from '../util/index' import VNode, {
cloneVNodes,
createTextVNode,
createEmptyVNode
} from '../vdom/vnode' import { createElement } from '../vdom/create-element'
import { renderList } from './render-helpers/render-list'
import { renderSlot } from './render-helpers/render-slot'
import { resolveFilter } from './render-helpers/resolve-filter'
import { checkKeyCodes } from './render-helpers/check-keycodes'
import { bindObjectProps } from './render-helpers/bind-object-props'
import { renderStatic, markOnce } from './render-helpers/render-static'
import { resolveSlots, resolveScopedSlots } from './render-helpers/resolve-slots' export function initRender (vm: Component) {
vm.$vnode = null // the placeholder node in parent tree 站位节点
vm._vnode = null // the root of the child tree 根节点
vm._staticTrees = null
const parentVnode = vm.$options._parentVnode
const renderContext = parentVnode && parentVnode.context
vm.$slots = resolveSlots(vm.$options._renderChildren, renderContext)
vm.$scopedSlots = emptyObject
// 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)
} export function renderMixin (Vue: Class<Component>) {
//定义 $nextTick函数, 实际调用了 nextTick方法
Vue.prototype.$nextTick = function (fn: Function) {
return nextTick(fn, this)
} Vue.prototype._render = function (): VNode {
const vm: Component = this
const {
render,
staticRenderFns,
_parentVnode
} = vm.$options if (vm._isMounted) {
// clone slot nodes on re-renders
for (const key in vm.$slots) {
//克隆虚拟节点给自己
vm.$slots[key] = cloneVNodes(vm.$slots[key])
}
}
//scopedSlots ...
vm.$scopedSlots = (_parentVnode && _parentVnode.data.scopedSlots) || emptyObject if (staticRenderFns && !vm._staticTrees) {
vm._staticTrees = []
}
// 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 function`)
// return error render result,
// or previous vnode to prevent render error causing blank component
/* istanbul ignore else */
// 返回一个错误渲染的结果, 或者前一个虚拟节点放在呈现错误的时候引起空白组件
if (process.env.NODE_ENV !== 'production') {
vnode = vm.$options.renderError
? vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e)
: 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
} // internal render helpers.
// these are exposed on the instance prototype to reduce generated render
// code size.
// 用简写, 生成实例的时候减少代码
Vue.prototype._o = markOnce
Vue.prototype._n = toNumber
Vue.prototype._s = _toString
Vue.prototype._l = renderList
Vue.prototype._t = renderSlot
Vue.prototype._q = looseEqual
Vue.prototype._i = looseIndexOf
Vue.prototype._m = renderStatic
Vue.prototype._f = resolveFilter
Vue.prototype._k = checkKeyCodes
Vue.prototype._b = bindObjectProps
Vue.prototype._v = createTextVNode
Vue.prototype._e = createEmptyVNode
Vue.prototype._u = resolveScopedSlots
}
vue.js 源代码学习笔记 ----- instance render的更多相关文章
- vue.js 源代码学习笔记 ----- instance proxy
/* not type checking this file because flow doesn't play well with Proxy */ import config from 'core ...
- vue.js 源代码学习笔记 ----- instance init
/* @flow */ import config from '../config' import { initProxy } from './proxy' import { initState } ...
- vue.js 源代码学习笔记 ----- instance index
import { initMixin } from './init' import { stateMixin } from './state' import { renderMixin } from ...
- vue.js 源代码学习笔记 ----- instance state
/* @flow */ import Dep from '../observer/dep' import Watcher from '../observer/watcher' import { set ...
- vue.js 源代码学习笔记 ----- instance event
/* @flow */ import { updateListeners } from '../vdom/helpers/index' import { toArray, tip, hyphenate ...
- vue.js 源代码学习笔记 ----- instance inject
/* @flow */ import { hasSymbol } from 'core/util/env' import { warn } from '../util/index' import { ...
- vue.js 源代码学习笔记 ----- core lifecycle
/* @flow */ import config from '../config' import Watcher from '../observer/watcher' import { mark, ...
- vue.js 源代码学习笔记 ----- html-parse.js
/** * Not type-checking this file because it's mostly vendor code. */ /*! * HTML Parser By John Resi ...
- vue.js 源代码学习笔记 ----- keep-alives
/* @flow */ import { callHook } from 'core/instance/lifecycle' import { getFirstComponentChild } fro ...
随机推荐
- SQL统计信息解释
[SQL基础]统计信息解释 在平时优化SQL的时候,最长用的就是:SET STATISTICS ON,它可以用来查看我们写的查询语句到底性能如何,不过,究竟这个性能的指标是怎么样的呢?首先需要明白的, ...
- ThinkPHP项目 公共方法存放位置
ThinkPHP项目公共方法写在 根目录-> app-> common 里面 ThinkPHP模板公共方法卸载 根目录->app->模块名称->common 里 ...
- Python3.x:zip()函数
Python3.x:zip()函数 1,概述: zip函数接受任意多个(包括0个和1个)序列作为参数,返回一个tuple列表: 2,示例: (1).示例1: x = [1, 2, 3] y = [4, ...
- path.join()和path.resolve()的区别
现在写代码的时候有时候使用path.join(__dirname,'dist')有时候用path.resolve(__dirname,'dist'),都是能拼接处来一个绝对路径,但是具体有什么区别呢? ...
- 20145211《网络渗透》msf辅助模块的应用
20145211<网络渗透>msf辅助模块的应用 一.实验准备 启用VB的kali,需要用到桥接,VMware桥接总是罢工…… 二.实验步骤 最好开桥接模式,要不然你就多开几个虚拟机(只要 ...
- linux top 各个标识的含义 详解
top之前一直都是一知半解,今天周末加班,我的工作已经完成,在等同事吃饭,就把这个写下来. 第一行: top - 20:42:47 up 57 days, 1:25, 4 users, ...
- svn的分支
svn的分支使用 新建一个项目的时候,选择建立自带trunk,branches和tags文件夹的. 其中trunk作为主开发. 有需要的时候,从trunk创建分支到对应的branches下面,新建分支 ...
- mybatis中的懒加载
知识点:mybatis中的懒加载的使用 参考:https://www.cnblogs.com/ysocean/p/7336945.html?utm_source=debugrun&utm_me ...
- linux按照进程名杀掉进程
1.按照进程名杀掉进程 ps -ef | grep sftp | grep mysql |grep -v grep | awk '{print("kill -9 ", ...
- 防止xss(脚本攻击)的方法之过滤器
一 什么是脚本注入 概念我就不说了 直接百度一份 XSS是一种经常出现在web应用中的计算机安全漏洞,它允许恶意web用户将代码植入到提供给其它用户使用的页面中.比如这些代码包括HTML代码和客户端 ...