Render函数详解
2020/3/29 11:02:41
本文主要是介绍Render函数详解,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一,虚拟dom
Vue通过创建一个虚拟的DOM来对真实的DOM节点发生的变化保持追踪。例如下面这行代码:DOM是文档对象模型(Document Object Model)的简写,在浏览器中通过js来操作DOM的操作性能很差,于是虚拟Dom应运而生。虚拟Dom就是在js中模拟DOM对象树来优化DOM操作的一种技术或思路。React和Vue2都使用了虚拟DOM技术,虚拟DOM并不是真正意义上的DOM,它作为一个轻量级的JavaScript对象,在状态发生变化时,会进行Diff运算,来更新发生变化的DOM,对于未发生变化的DOM节点,不予操作,由于不是全部重绘,大大提高更新渲染性能。当使用render函数描述虚拟DOM时,vue提供一个函数,这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫 createElement。还有约定的简写叫 h, vm中有一个方法 _c, 也是这个函数的别名。
return createElement('h1', this.blogTitle) 复制代码
createElement返回的并不是一个实际的DOM元素,它更准确的名字可能是createNodeDescription(创建描述Node),因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点,及其子节点。我们把这样的节点描述为“虚拟节点 (Virtual Node)”,也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。
render方法会传入一个createElement函数,它是一个用于创建DOM元素或者用于实例化其他组件的构造方法。render方法必须返回一个createElement函数的调用结果,也就是模版内的顶层元素(这个方法在vue2的习惯性使用中经常用h来命名)。
二,CreateElement基本用法
1.基本参数
createElement构成了Vue虚拟DOM的模板,它有3个参数:
// @returns {VNode} createElement( // {String | Object | Function} // 一个 HTML 标签字符串,组件选项对象,或者 // 解析上述任何一种的一个 async 异步函数。必需参数。 'div', // {Object} // 一个包含模板相关属性的数据对象 // 你可以在 template 中使用这些特性。可选参数。 { // (详情见下一节) }, // {String | Array} // 子虚拟节点 (VNodes),由 `createElement()` 构建而成, // 也可以使用字符串来生成“文本虚拟节点”。可选参数。 [ '创建h1标签', createElement('h1', 'Render函数'), createElement(MyComponent, { props: { someProp: 'foobar' } }) ] ) 复制代码
2.函数模板各部分含义
a.'div':html节点
{String | Object | Function} -必要参数
HTML标签字符串 | 组件选项对象 | 解析上述任何一种的一个 async 异步函数 示例代码:
<script> var app = new Vue({ el: "#app", // 使用render函数来创建DOM render: function (createElement) { // createElement 是一个方法 alert(typeof createElement); //render 第一个参数必选,{String | Object | Function} //String--html标签 //Object--一个含有数据选项的对象 //Function--方法返回一个含有数据选项的对象 //①当参数为String时 return createElement('div', 'hello world'); //②当参数为Object时 // return createElement({ // template: '<div>hello world</div>' // }) //③当参数为Function时 // var domFun = function () { // return { // template: "<div>hello world</div>" // }; // }; // return createElement(domFun()); } }); </script> 复制代码三种参数输出的DOM节点是一样的,注意:由于createElement函数的调用结果会生成模版内的顶层元素,所以会覆盖vue初始定义的#app的根节点
b.{}:节点属性
{Object} -可选参数
一个包含模板相关属性的数据对象,这样,您可以在 template 中使用这些属性 示例代码:
<script> var app = new Vue({ el: "#app", // 使用render函数来创建DOM render: function (createElement) { return createElement({ template: '<div>hello world</div>' }, { 'class': { foo: true, bar: false }, style: { color: 'red', fontSize: '16px' }, //正常的html特性 attrs: { // 也就是除了class,style之外的属性可以写在这 id: 'foo', src: 'http://baidu.com' }, //用来写原生的dom属性 domProps: { innerHTML: '<span style="color:pink;font-size:18px">Hello Word</span>' } }) } }); </script> 复制代码详细属性:
{ // 和`v-bind:class`一样的 API // 接收一个字符串、对象或字符串和对象组成的数组 'class': { foo: true, bar: false }, // 和`v-bind:style`一样的 API // 接收一个字符串、对象或对象组成的数组 style: { color: 'red', fontSize: '14px' }, // 正常的 HTML 特性 attrs: { id: 'foo' }, // 组件 props props: { myProp: 'bar' }, // DOM 属性 domProps: { innerHTML: 'baz' }, // 事件监听器基于 `on` // 所以不再支持如 `v-on:keyup.enter` 修饰器 // 需要手动匹配 keyCode。 on: { click: this.clickHandler }, // 仅对于组件,用于监听原生事件,而不是组件内部使用 // `vm.$emit` 触发的事件。 nativeOn: { click: this.nativeClickHandler }, // 自定义指令。注意,你无法对 `binding` 中的 `oldValue`赋值,因为 Vue 已经自动为你进行了同步。 directives: [ { name: 'my-custom-directive', value: '2', expression: '1 + 1', arg: 'foo', modifiers: { bar: true } } ], // 作用域插槽格式 // { name: props => VNode | Array<VNode> } scopedSlots: { default: props => createElement('span', props.text) }, // 如果组件是其他组件的子组件,需为插槽指定名称 slot: 'name-of-slot', // 其他特殊顶层属性 key: 'myKey', ref: 'myRef' } 复制代码
详细demo参考网址:www.jianshu.com/p/b019d4858…
c.[ ]:html节点的子节点
{String | Array} -可选参数
子节点 (VNodes),由createElement()
构建而成,或使用字符串来生成“文本节点”
<script> var app = new Vue({ el: "#app", data() { return { list: ['li-1', 'li-2', 'li-3'] } }, // 使用render函数来创建DOM render: function (createElement) { return createElement( 'ul', this.list.map(item => { return createElement('li', item) }) ) } }); </script> 复制代码详细demo参考网址:www.jianshu.com/p/a788305a6…
3.使用JavaScript代替模板功能
在Render函数中,不再需要Vue内置的指令,比如v-if、v-for。无论要实现什么功能,都可以使用原生JavaScript。render函数里没有与v-model对应的API,需要自己来实现逻辑。
对于事件修饰符和按键修饰符,基本需要自己实现:
修饰符 | 对应的句柄 |
---|---|
.stop | event.stopPropagation() |
.prevent | event.preventDefault() |
.self | if(event.target!==event.currentTarget) return |
.ente、.13 | if(event.keyCode!==13) return 替换13位需要的keyCode |
.ctrl、.alt、.shift、.meta | if(!event.ctrlKey) return 根据需要替换ctrlKey位altKey、shiftKey或metaKey |
对于事件修饰符.capture和.once,Vue提供了特殊的前缀,可以直接写在on的配置里。
修饰符 | 前缀 |
---|---|
.capture | ! |
.once | ~ |
.capture.once或.once.capture | ~! |
写法如下:
on: { '!click': this.doThisInCapturingMode, '~keyup': this.doThisOnce, '~!mouseover': this.doThisOnceInCapturingMode } 复制代码
参考网址:
有需要更正的地方各位看官可以在评论里面指出!
这篇关于Render函数详解的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-06小米11i印度快充版ROM合集:极致体验,超越期待
- 2024-10-06【ROM下载】小米11i 5G 印度版系统, 疾速跃迁,定义新速度
- 2024-10-06【ROM下载】小米 11 青春活力版,青春无极限,活力全开
- 2024-10-05小米13T Pro系统合集:性能与摄影的极致融合,值得你升级的系统ROM
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求