关于前端:Vue-特性学习render函数

vue中视图的渲染过程如下图所示。

优先应用render函数，如render函数不存在会去查找template。最终将template编译生成render函数，应用render函数实现视图渲染。（vue的视图模板实际上是通过render函数渲染进去的）

render函数返回virtual DOM，vue框架基于virtual DOM生成实在的DOM。
（virtual DOM -> actual DOM）
render函数使得咱们领有应用js构建DOM的能力。咱们能够自定义Render函数实现更灵便的性能。

render函数与props、data、computed同级，它承受一个createElement函数作为参数, 通常简写为h。如下图所示。

createElement (简写为h) 是 render 函数的参数，它自身也是个函数，有三个参数。

1. 第一个参数是必填的，能够是String | Object | Function
   String，示意的是HTML 标签名
   Object ，一个含有数据的组件对象
   Function ，返回了一个含有标签名或者组件选项对象的async 函数
2. 第二个参数是选填的，一个与模板中属性对应的数据对象
   罕用的有class | style | attrs | domProps | on
3. 第三个参数是选填的，代表子级虚构节点 (VNodes)，由 createElement() 构建而成, 也能够搁置字符串。如果搁置字符串，字符串会被创立为第一个参数创立的dom节点下的文本。

注：任何时候都须要一个文本搁置在dom元素中。即第三个参数的地位始终须要搁置一个货色，如果不是[…]，就是”str”。

举几个h函数的例子。

render函数的应用举例。

实现一个example组件，接管数组tags作为参数，创立与tags内容雷同的html标签，标签的内容是对应tag的index。
用render函数实现如下。

同步更新到本人的语雀，格局难看点，能够移步
https://www.yuque.com/diracke…