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

37次阅读

共计 833 个字符,预计需要花费 3 分钟才能阅读完成。

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…

正文完
 0