zoukankan      html  css  js  c++  java
  • Vue学习(二十四)render函数

    render函数

    Vue2与Vue1最大的区别是Vue2使用虚拟节点更新DOM,提示渲染性能。

    Vue中的虚拟节点是一个js对象

    render函数的作用

    render函数通过createElement参数创建virtualDom,从而简化组件的写法。适用于组件中有大量代码是重复的场景,使用Render函数在其中通过书写js方法生成virtualDom。

    render 函数 跟 template 一样都是创建 html 模板的,但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复,这时候就可以用 render 函数。

    render方法的实质就是生成template模板;

    • 通过调用一个方法(h)来生成,而这个方法(h)是通过render方法的参数传递给它的;

    • 这个方法有三个参数,分别提供标签名,标签相关属性,标签内部的html内容

    • 通过这三个参数,可以生成一个完整的模板

    h函数/createElement

    因为vue是虚拟DOM,所以在拿到template模板时也要转译成VNode的函数,而用render函数构建DOM,vue就免去了转译的过程。当使用render函数描述虚拟DOM时,vue提供一个函数,这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定的简写叫h。

    参数

    createElement有三个参数,第一个参数为html标签或者组件或者函数,这个参数是必选参数。第二个参数可选,对应属性中的数据对象。第三个参数也是可选参数,对应子节点,子节点也是用createElement方法构建。

    第二个参数的可以定义属性类型

    Render的写法比较复杂且可读性差,一般都用template来实现,只有特殊的场景才使用Render函数。

    在组件树中,VNode如果是组件或者含有组件的slot,那么VNode必须唯一。

    参考

    vue官网:渲染函数&JSX

    iview官网:表格Render写法

  • 相关阅读:
    [Linux起步]常用命令
    Eclipse被SD杂志评为最佳开源工具
    [一点一滴学英语]20050921
    [一点一滴学英语]20050920
    [一点一滴学英语]20050919
    Longhorn (Vista) 推迟发布的背后
    最快速度找到内存泄漏
    重载(overload)、覆盖(override)、隐藏(hide) 详解
    HTTP请求和响应格式
    Skia之四——SkGradientShader篇
  • 原文地址:https://www.cnblogs.com/kunmomo/p/15343560.html
Copyright © 2011-2022 走看看