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 传递给子组件之前操作他们
vue render的更多相关文章
- vue render里面的nativeOn
vue render里面的nativeOn的解释官方的解释是:// 仅对于组件,用于监听原生事件,而不是组件内部使用 `vm.$emit` 触发的事件. 官方的解释比较抽象 个人理解: 父组件要在子组 ...
- vue render function & dataset
vue render function & dataset https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In ...
- vue render & array of components & vue for & vue-jsx
vue render & array of components & vue for & vue-jsx https://www.cnblogs.com/xgqfrms/p/1 ...
- vue render function
vue render function https://vuejs.org/v2/guide/render-function.html { // Same API as `v-bind:class`, ...
- vue render 渲染函数
vue render 渲染函数 经常看到使用render渲染函数的示例,而且在一些特殊情况下,确实更好使用,可以更加有效地细分组件,因而借助vue-element-admin来学习一波 render函 ...
- vue render html string
vue render html string shit element ui render string array relativeShowConvert(data) { // log(`data` ...
- vue render函数 函数组件化
之前创建的锚点标题组件是比较简单,没有管理或者监听任何传递给他的状态,也没有生命周期方法,它只是一个接受参数的函数 在这个例子中,我们标记组件为functional,这意味它是无状态(没有data), ...
- vue render函数
基础 vue推荐在绝大多数情况下使用template来创建你的html.然而在一些场景中,你真的需要javascript的完全编程能力.这就是render函数.它比template更接近编译器 < ...
- vue render & JSX
vue在绝大多数使用template是没问题的,但在某些场合下,使用render更适合. 一.render函数 1.createElement 参数 createElement 可接受三个参数 1){ ...
- vue render {} 对象 说明文档
Vue学习笔记进阶篇——Render函数 http://www.mamicode.com/info-detail-1906336.html 深入data object参数 有一件事要注意:正如在模板语 ...
随机推荐
- kafka删除弃用的groupid
登录zookeeper客户端 cd zookeeper-3.4.10 sh zkCli.sh 查看groupid信息 [zk:localhost:2181(CONNECTED) 1] ls /cons ...
- redis 主从复制和哨兵模式(二)
Redis 主从复制 为了分担单机 redis 的数据服务压力,需要进行读写分离,所以搭建 redis 的主从结构,主节点负责写,从节点负责读,主节点定期把数据同步到从节点. 配置主从 # 配置文件中 ...
- Airflow自定义插件, 使用datax抽数
Airflow之所以受欢迎的一个重要因素就是它的插件机制.Python成熟类库可以很方便的引入各种插件.在我们实际工作中,必然会遇到官方的一些插件不足够满足需求的时候.这时候,我们可以编写自己的插件. ...
- 【SQL server基础】初步学习存储过程(好学易懂)
-------------------------------------------------------------------------- ------------------------- ...
- Merge into 语句实例
/*Merge into 详细介绍MERGE语句是Oracle9i新增的语法,用来合并UPDATE和INSERT语句.通过MERGE语句,根据一张表或子查询的连接条件对另外一张表进行查询,连接条件匹配 ...
- Java 上传解压zip文件,并且解析文件里面的excel和图片
需求:上传一个zip文件,zip文件里面包含一个excel和很多图片,需要把excel里面的信息解析出来保存到表中,同时图片也转化成base64保存到数据库表中. PS:为了方便不同水平的开发人员阅读 ...
- OKR群:为什么说每个程序员都应该有自己的个人OKR
个人OKR OKR,即Object and Key Result,是IT大厂最近争相推广的目标管理工具,例如腾讯.百度和头条(字节跳动). 其实,OKR并不是仅仅只适用于公司和部门内部,我们个人也可以 ...
- 前端深入之css篇|link和@import到底有什么区别?
写在前面 在真正的前端开发中,我们很少去写行内样式和内嵌样式,通常都是去引用外部样式. 而在我们学习之初的外部样式表都是用link引入的,但是当后来我们学习的逐渐深入,发现@import也可以引入样式 ...
- Thinkphp5.0第一篇
THINKphp5.0框架 mvc moudle(数据)+view(表现层)+controller(业务逻辑) thinkphp5.0特点 中国人开发最符合国人习惯和思维方式 开源免费面向对象轻量级的 ...
- 死磕 java线程系列之线程池深入解析——体系结构
(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本. 简介 Java的线程池是块硬骨头,对线程池的源码做深入研究不仅能提高对Java整个并发编程的理解,也能提高自己 ...