Vue2.x中的Render函数详解

2024-09-28 18:14:08

Render函数是Vue2.x版本新增的一个函数；使用虚拟dom来渲染节点提升性能，因为它是基于JavaScript计算。通过使用createElement(h)来创建dom节点。createElement是render的核心方法。其Vue编译的时候会把template里面的节点解析成虚拟dom；

什么是虚拟dom?

虚拟dom不同于真正的dom，它是一个JavaScript对象。当状态发生变化的时候虚拟dom会进行一个diff判断/运算；然后判断哪些dom是需要被替换的而不是全部重绘，所以性能会比dom操作高很多。

下面看一张Aresn大神总结的一张图：

Vue2.x版本中VNode属性：

tag:当前节点标签名，

data：当前节点数据对象，

children：子节点数组，

text：当前节点文本，

elm：当前虚拟节点对应的真实dom节点，

ns：节点的namespace( 名称空间)，

content：编译作用域，

functionalContext：函数化组件的作用域，即全局上下文，

key：节点标识，有利于patch优化，

componentOptions：创建组件实例时的options，

child：当前节点对应的组件实例，

parent：组件的占位节点，

raw：原始html，

isStatic：是否是静态节点，

isRootInsert：是否作为跟节点插入，若被<transition>包裹的节点，该属性值为false，

isComment：是否为注释节点，

isCloned：是否为克隆节点，

isOnce：是否只改变(渲染)一次，或是否有v-once指令；

其中这里面又有几种VNode类型：

Aresn大神总结的很好：

TextVNode：文本节点，

ElementVNode：普通元素节点，

ComponentVNode：组件节点，

EmptyVNode：空节点，或者说是没有内容的注释节点，

CloneVNode：克隆节点，可以是以上任意类型节点

说了那么多；到底什么时候用虚拟dom才比较好呢？其实我们使用的单文件组件就已经够好了。但是当某些代码冗余的时候如果写单文件组件的话会有好多重复的内容；

接下来介绍其核心函数；

createElement：

createElement接收3个参数：

第一个参数可以是HTML标签名，组件或者函数都可以；此参数是必须的；

第二个为数据对象（可选）；

第三个为子节点（可选）。

附上一个非常简单的createElement函数demo；

 var app = new Vue({
   el:"#app",
   render:createElement => {
     eturn createElement(
       'h2',
       [
         createElement(
           'a',
           {
             domProps:{
               href:"#biaoti"
             }
           },
           "标题"
         )
        ]
       );

     }
 });

这只是一个createElement函数的使用，而Vue2中VNodeData

class: v-bind/:class

style:v-bind/:style

attrs:dom属性，如id

props:props,

on:自定义事件等，

nativeOn:原生事件

像这些也可以在render函数中实现，若VNode是组件或含有组件的slot，那么VNode必须是唯一。

像平常开发过程中单文件组件中template写法更为简单，可读性也高。如果是webpack进行打包的话template也会预编译成render函数。

这里demo栗子暂时还没写那么多。这里只是一个简单的介绍。若有更好的欢迎大家一起学习讨论。

了解VUE的render函数的使用

Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器. 在 HTML 层, 我们决定这样定义组件接口:通过传入不同的level 1-6 生成h1-h6标签,和使用slot生成内容 <div id="div1"> <child :level="1">Hello world!</chil
如何理解Vue的render函数的具体用法

本文介绍了如何理解Vue的render函数的具体用法,分享给大家,具体如下: 第一个参数(必须) - {String | Object | Function} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>render</title> <script src="https://cdn.b
深入理解vue Render函数

最近在学习vue,正好今日留个笔记,我自己还在摸索学习中,现整理出来以作记录. 会使用基本的Render函数后,就会想,这怎么用 v-for/v-if/v-model;我写个vue Render函数进阶首先是v-if 的转化使用全局组件的v 值决定组件渲染的状态,对实例中传递的props的"nnum"值得控制可以自如的切换两种状态显示.这样就是和v-if 一样使用组件了 <div id="app"> <mycom :v="nnum&qu
Vue2.x中的Render函数详解

Render函数是Vue2.x版本新增的一个函数:使用虚拟dom来渲染节点提升性能,因为它是基于JavaScript计算.通过使用createElement(h)来创建dom节点.createElement是render的核心方法.其Vue编译的时候会把template里面的节点解析成虚拟dom: 什么是虚拟dom? 虚拟dom不同于真正的dom,它是一个JavaScript对象.当状态发生变化的时候虚拟dom会进行一个diff判断/运算:然后判断哪些dom是需要被替换的而不是全部重绘,所以性能
vue2.x中h函数(createElement)与vue3中的h函数详解

目录 1. vue2.x的 h 函数(createElement) 2. vue3 h函数配置项 2.1 v-model实现(以下开始为官网实现) 2.2 v-on 2.3 事件修饰符 2.4 插槽 2.5 component 和 is 2.6 自定义指令 2.7 内置组件 2.8 渲染函数的返回值 2.9 JSX 总结 1. vue2.x的 h 函数(createElement) 使用方法及介绍:(参考官网提取) h函数第一个是标签名字或者是组件名字,第二个参数是配置项,第三个参数是 inn
javascript中Array()数组函数详解

在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活.强大,不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改. Array()是一个用来构建数组的内建构造器函数.数组主要由如下三种创建方式: array = new Array() array =
COM组件中调用JavaScript函数详解及实例

COM组件中调用JavaScript函数详解及实例要求是很简单的,即有COM组件A在IE中运行,使用JavaScript(JS)调用A的方法longCalc(),该方法是一个耗时的操作,要求通知IE当前的进度.这就要求使用回调函数,设其名称为scriptCallbackFunc.实现这个技术很简单: 1 .组件方(C++) 组件A 的方法在IDL中定义: [id(2)] HRESULT longCalc([in] DOUBLE v1, [in] DOUBLE v2, [in, optional
对Python3中的input函数详解

下面介绍python3中的input函数及其在python2及pyhton3中的不同. python3中的ininput函数,首先利用help(input)函数查看函数信息: 以上信息说明input函数在python中是一个内建函数,其从标准输入中读入一个字符串,并自动忽略换行符. 也就是说所有形式的输入按字符串处理,如果想要得到其他类型的数据进行强制类型转化.默认情况下没有提示字符串(prompt string),在给定提示字符串下,会在读入标准输入前标准输出提示字符串.如果遇文件结束符
对TensorFlow中的variables_to_restore函数详解

variables_to_restore函数,是TensorFlow为滑动平均值提供.之前,也介绍过通过使用滑动平均值可以让神经网络模型更加的健壮.我们也知道,其实在TensorFlow中,变量的滑动平均值都是由影子变量所维护的,如果你想要获取变量的滑动平均值需要获取的是影子变量而不是变量本身. 1.滑动平均值模型文件的保存 import tensorflow as tf if __name__ == "__main__": v = tf.Variable(0.,name="
对Tensorflow中的矩阵运算函数详解

tf.diag(diagonal,name=None) #生成对角矩阵 import tensorflowas tf; diagonal=[1,1,1,1] with tf.Session() as sess: print(sess.run(tf.diag(diagonal))) #输出的结果为[[1 0 0 0] [0 1 0 0] [0 0 1 0] [0 0 0 1]] tf.diag_part(input,name=None) #功能与tf.diag函数相反,返回对角阵的对角元素 imp
python中的 zip函数详解及用法举例

python中zip()函数用法举例定义:zip([iterable, ...]) zip()是Python的一个内建函数,它接受一系列可迭代的对象作为参数,将对象中对应的元素打包成一个个tuple(元组),然后返回由这些tuples组成的list(列表).若传入参数的长度不等,则返回list的长度和参数中长度最短的对象相同.利用*号操作符,可以将list unzip(解压),看下面的例子就明白了: 示例1 x = [1, 2, 3] y = [4, 5, 6] z = [7, 8, 9] x
SQL中的开窗函数详解可代替聚合函数使用

在没学习开窗函数之前,我们都知道,用了分组之后,查询字段就只能是分组字段和聚合的字段,这带来了极大的不方便,有时我们查询时需要分组,又需要查询不分组的字段,每次都要又到子查询,这样显得sql语句复杂难懂,给维护代码的人带来很大的痛苦,然而开窗函数出现了,曙光也来临了.如果要想更具体了解开窗函数,请看书<程序员的SQL金典>,开窗函数在mysql不能使用. 开窗函数与聚合函数一样,都是对行的集合组进行聚合计算.它用于为行定义一个窗口(这里的窗口是指运算将要操作的行的集合),它对一组值进行操作,不
C++中的Lambda函数详解

目录一函数语法二函数应用 1.在普通函数中使用 2.在qt信号槽中使用 3.在std::sort排序函数中的使用三总结一函数语法我们平时调用函数的时候,都是需要被调用函数的函数名,但是匿名函数就不需要函数名,而且直接写在需要调用的地方,对于以前没用过的小伙伴来说,第一眼看见了这语法可能很迷惑. C++11的基本语法格式为: [capture](parameters) -> return_type { /* ... */ } (1) [capture] :[]内为外部变量的传递方

Vue2.x中的Render函数详解

相关推荐

随机推荐