vue 理解&使用render函数
render函数是vue中生成虚拟dom的底层api,可用于在组件封装中使用js编写动态模板,实现js的完全编程能力。vue中在一些复杂场景下使用template模板不太方便,例如需要引入大量子组件时,使用template模板会使代码重复冗余,这时用render函数就可以轻松解决问题。一、render函数的背景在深入渲染函数之前,建议先了解一下vue的渲染原理。1、虚拟domvue通过建立一个虚拟
render函数是vue中生成虚拟dom的底层api,可用于在组件封装中使用js编写动态模板,实现js的完全编程能力。
vue中在一些复杂场景下使用template模板不太方便,例如需要引入大量子组件时,使用template模板会使代码重复冗余,这时用render函数就可以轻松解决问题。
一、render函数的背景
在深入渲染函数之前,建议先了解一下vue的渲染原理。
1、虚拟dom
vue通过建立一个虚拟DOM来追踪自己要如何改变真实DOM。真实DOM的属性有几百个,为了更高效的来完成dom对比及局部更新,vue引入虚拟DOM的方式来模拟真实dom节点。
通过调用createElement()方法,生成createNodeDescription,即VNode,而虚拟DOM是所有VNode建立的整个DOM数的总称。
当数据更新时,会生成新的虚拟DOM,与旧的虚拟DOM进行diff对比,本质上就是tree树形结构数据的递归遍历比对,找出不同的VNode数据;然后对变化的这部分VNode通过patch生成真实DOM渲染出来。
2、渲染过程
vue的渲染过程大致可以分成4个阶段:
- 模板解析生辰AST数
- AST数解析生成对应的render函数
- 数据通过render函数解析生成VNode
- VNode经过diff和patch后生成真实DOM展示
二、render函数的使用
1、应用场景示例
当存在大量引入不同子组件时的场景时,template只能逐个引入子组件写死,而render函数可以用js动态编写html模板。
这里举用官网的代码例子。
- 使用template书写:
<script type="text/x-template" id="anchored-heading-template">
<h1 v-if="level === 1">
<slot></slot>
</h1>
<h2 v-else-if="level === 2">
<slot></slot>
</h2>
<h3 v-else-if="level === 3">
<slot></slot>
</h3>
<h4 v-else-if="level === 4">
<slot></slot>
</h4>
<h5 v-else-if="level === 5">
<slot></slot>
</h5>
<h6 v-else-if="level === 6">
<slot></slot>
</h6>
</script>
Vue.component('anchored-heading', {
template: '#anchored-heading-template',
props: {
level: {
type: Number,
required: true
}
}
})
- 使用render书写:
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level, // 标签名称
this.$slots.default // 子节点数组
)
},
props: {
level: {
type: Number,
required: true
}
}
})
2、createElement 参数
-
第一个参数
- 参数类型:String | Object | Function
- 是否必填:是
- 参数描述:参数为html标签名 或组件选项对象 或resolve了上述任何一种的async函数
- 代码示例:
// String createElement('div', 'hello world!') // Object createElement({ template: `<div>hello world!</div>` }) // Function createElement(async () => { return new Promise((resolve) => { setTimeout(() => { resolve({ template: `<div>hello world!</div>` }) }, 1000) }) })
-
第二个参数
- 参数类型:Object
- 是否必填:否
- 参数描述:参数为一个与模板中attribute对应的数据对象,用于表示节点属性
- 代码示例:
{ // 与 `v-bind:class` 的 API 相同, // 接受一个字符串、对象或字符串和对象组成的数组 'class': { foo: true, bar: false }, // 与 `v-bind:style` 的 API 相同, // 接受一个字符串、对象,或对象组成的数组 style: { color: 'red', fontSize: '14px' }, // 普通的 HTML attribute attrs: { id: 'foo' }, // 组件 prop props: { myProp: 'bar' }, // DOM property 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', // 其它特殊顶层 property key: 'myKey', ref: 'myRef', // 如果你在渲染函数中给多个元素都应用了相同的 ref 名, // 那么 `$refs.myRef` 会变成一个数组。 refInFor: true }
-
第三个参数
- 参数类型:String | Array
- 是否必填:否
- 参数描述:参数为文本虚拟节点字符串 或由
createElement()
构建而成的子级虚拟节点,用于描述子节点。 - 代码示例:
createElement( 'div', { class: { title: true }, style: { border: '1px solid', padding: '10px' } }, [ createElement('h1', 'Hello Vue!'), createElement('p', 'Hello world!') ] )
-
注意:
严格地说,第二个参数和第三个参数并不是绝对的第几个,如果只有两个参数,而第二个参数是字符串或数组类型,那这里第二个参数实际上会作为上述介绍中的第三种参数来使用。// 例如 createElement( 'div', [ createElement('h1', 'Hello Vue!'), createElement('p', 'Hello world!') ] ) // 这里第二个参数会作为子节点来使用,解析结果为: <div> <h1>Hello Vue!</h1> <p>Hello world!</p> </div>
三、使用JSX
使用render函数书写复杂组件时还是显得代码比较繁琐不清晰,而使用JSX就方便多了,vue中也可以配置使用JSX。
配置教程(官方文档):
- 安装依赖:
npm i -D @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
- 配置babel:
babel.config.js
里配置添加:module.exports = { presets: ['@vue/babel-preset-jsx'], }
- 愉快地使用:
render() { return ( <input type="email" placeholder={this.placeholderText} /> ) }
参开链接:https://juejin.cn/post/6844903973502058504#heading-1
更多推荐
所有评论(0)