vue render

Vue 的 render 渲染

API

vue2 的 vnode

tag: 当前节点的标签名

data: 当前节点是数据对象

children: 子节点，数组也是vnode 类型

text: 当前节点的文本，一般文本节点或注释节点会有该属性

elm: 当前虚拟节点对应的真实的DOM节点

ns: 节点的namespace

content :编译作用域

functionalContext 函数话组件作用域

key: 节点的key属性，用于作为节点的标识，利于patch 的优化

componentOPtions: 创建组件实例会用到的选项信息

child: 当前节点对应的组件实例

parent:组件的站位节点

raw: 原始的html

isStatic : 静态节点标识

isRootInsert: 是否作为根节点插入，被包裹的节点，该属性的值为false

isComment: 当前的节点是否是注释节点

isCloned: 当前的节点是否是克隆节点

isOne: 当前节点是否有v-once 指令

vNode

TextVNode 文本节点

ElementVNode 普通元素节点

ComponentVnode 组件节点

EmptyVNode： 组件节点

CloneVNode 克隆节点，可以是任意类型的节点，唯一的区别是isCloned 的属性为TRUE

解决的场景

• 代码的冗长
• template 中的大部分是重复的
• 外层的中必须包含无用的div

createElement用法（h）

eg: creteElement(

'div',

// {object}

// 一个对应属性的数据对象，可选 可以在template中使用

{},

// {string |atrray}

// 子节点{VNode}， 可选

[

createElement('h1', 'hello world'),

createElement('mycomponent', {

props:{

someProp: 'foo'

}

}),

]


)

第一个： 一个参数必选，可以是一个html 标签，也可是一个组件或者是一个函数{string | object | Function} 必须return 上述其中的一个

第二个： 可选参数 数据对象

vueNodeData

key? :string | number

slot? string;

scopedSlots?:{[key: string]: scopedSlot},

ref?:String;

tag?:string;

staticClass?:string;

class?:any;

staticStyle?{[key:string]: any}

style: Object[] | object
props? {[key:string]: any}
attrs?: {[key:string]: any}//HTML 属性
domProps?:{[key:string]: any}
hook?:{[key:string]: Function}
on?:{[key:string]: Function | Function[]} // 自定义事件
nativeOn?: {[key:string]: Function | Function[]} // 原生事件
transition?:Object
show?: boolean
inlineTemplate?:{
render: Function;
staaticRenderFns: Function[];
}
directives?: VNodeDirective[];
keepAlive?: boolean;


第三个： 是子节点，也是可选用法一至

约束

所有组件树中，如果VNODE是组件，或含有组件的slot，那VNode 必须唯一

1、错误的用法，以为子组件重复了

2、因为slot包含了组件 并且重复了

使用JavaScript 代替模板的功能

在render 中没有指令 一切都可以用js 来实现。

slot的默认内容

// this.$slots.default 等于undefined

说明组件中没有定义的slot 这是就可以自定义内容

函数化组件

vue.js 提供了一个functional 的布尔值选项，设置为TRUE可以使组件无状态和无实例，也就是无data 和this上下文。这样用render函数返回

虚拟几点合一变得更加容易渲染，因为函数话组件只是一个函数，渲染开销要小的很多

使用函数话组件的时候render 提供了第二个参数来提供临时上下文

适用场景

1、程序化地在多个组件中选择一个

2、在将children props data 传递给子组件之前操作他们