资讯专栏INFORMATION COLUMN

Vue.js-Render函数

ccj659 / 3011人阅读

摘要:函数通过参数来创建虚拟,结构精简。其中,访问的用法,使用场景集中在函数。使用代替模板功能在函数中,不再需要内置的指令,比如。方法时快速改变数组结构,返回一个新数组。

学习笔记:Render函数
Render函数

Vue2Vue1最大的区别就在于Vue2使用了虚拟DOM来更新DOM节点,提升渲染性能。

Vue2Vue1最大的区别就在于Vue2使用了虚拟DOM来更新DOM节点,提升渲染性能。

Vue2Vue1最大的区别就在于Vue2使用了虚拟DOM来更新DOM节点,提升渲染性能。

Vue2Vue1最大的区别就在于Vue2使用了虚拟DOM来更新DOM节点,提升渲染性能。
虚拟DOM

React和Vue2都使用了虚拟DOM技术,虚拟DOM并不是真正意义上的DOM,而是一个轻量级的JavaScript对象,在状态发生变化时,虚拟DOM会进行Different运算,来更新只需要被替换的DOM,而不是全部重绘。

与DOM操作相比,虚拟DOM是基于JavaScript计算的,所以开销会小很多。

在Vue2中,虚拟DOM就是通过一种VNode类表达,每个DOM元素或组件对对应一个VNode对象。

VNodeData节点解析:

children 子节点,数组,也是VNode类型。

text 当前节点的文本,一般文本节点或注释节点会有该属性。

elm 当前虚拟节点对应的真实的DOM节点。

ns 节点的namespace

content 编译作用域

functionalContext 函数化组件的作用域

key 节点的key属性,用于作为节点的标识,有利于patch的优化

componentOptions 创建组件实例时会用到的选项信息。

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

parent 组件的占位节点。

raw 原始html

isStatic 静态节点的标识

isRootInset 是否作为根节点插入,被包裹的节点,该属性的值为false

isConment 当前节点是否是注释节点。

isCloned 当前节点是否为克隆节点。

isOnce 当前节点是否有v-once指令。

VNode主要可以分为以下几类:

TextVNode 文本节点。

ElementVNode 普通元素节点。

ComponentVNode 组件节点。

EmptyVNode 没有内容的注释节点。

CloneVNode 克隆节点,可以是以上任意类型的节点,唯一的区别在于isCloned属性为true

Render函数通过createElement参数来创建虚拟DOM,结构精简。其中,访问slot的用法,使用场景集中在Render函数

See the Pen Vue-render函数 by whjin (@whjin) on CodePen.


map()方法时快速改变数组结构,返回一个新数组。map常和filtersort等方法一起使用,它们返回的都是新数组。

Render函数里没有与v-model对应的API,需要自己来实现逻辑。

See the Pen Vue-render-API by whjin (@whjin) on CodePen.


在Render函数中会大量使用slot,在没有使用slot时会显示一个默认的内容,这部分需要自己实现。

this.$slots.default等于undefined,就说明父组件中没有定义slot,这是可以自定义显示的内容。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102658.html

相关文章

  • JavaScript面向对象编程——Function类型

    摘要:在中,函数也是以对象的形式存在的。也可以使用对象作为参数返回值调用该函数的返回结果。调用自身的函数被称之为递归函数。默认名字的函数被称之为匿名函数。内部函数在函数中声明内嵌函数,内嵌函数对函数中的局部变量进行访问。 Function类型 Function与函数 函数它只定义一次,但可能被执行或调用多次 。Function类型是JavaScript提供的引用类型之一,通过Function...

    Object 评论0 收藏0
  • JavaScript...Function类型...

    摘要:类型与函数函数是这样一段代码它只定义一次但可能被执行或调用多次类型是提供的引用类型之一通过类型创建对象在中函数也是以对象的形式存在的每个函数都是一个对象函数名本质就是一个变量名是指向某个对象的引用函数声明方式字面量方式判断函数是否为类型的中 Function类型 Function与函数 函数是这样一段JavaScript代码 它只定义一次 但可能被执行或调用多次Function类型是J...

    Eirunye 评论0 收藏0
  • js函数探索

    摘要:关于构造函数有几点需要特别注意构造函数允许在运行时动态的创建并编译函数。而函数本身的表示该函数的形参。每一个函数都包含不同的原型对象,当将函数用作构造函数的时候,新创建的对象会从原型对象上继承属性。 该文章以收录: 《JavaScript深入探索之路》 前言 函数是这样的一段JavaScript代码,它只定义一次,但是可能被执行或调用任意次。你可能已经从诸如子例程或者过程这些名字里...

    thursday 评论0 收藏0
  • 论普通函数和箭头函数的区别以及箭头函数的注意事项、不适用场景

    摘要:第二种情况是箭头函数的如果指向普通函数它的继承于该普通函数。箭头函数的指向全局,使用会报未声明的错误。 showImg(https://segmentfault.com/img/remote/1460000018610072?w=600&h=400); 箭头函数是ES6的API,相信很多人都知道,因为其语法上相对于普通函数更简洁,深受大家的喜爱。就是这种我们日常开发中一直在使用的API...

    paulquei 评论0 收藏0
  • JavaScript 之 面向对象 [ Function类型 ]

    摘要:类型描述在中的所有函数都是类型的对象定义函数的方式函数声明方式函数名函数体函数声明方式定义函数函数声明方式显示函数声明方式字面量方式函数名函数体字面量方式定义函数字面量方式显示字面量方式构造函数方式函数名参数,函数体函数的参数和函数体,都以 Function类型 描述 在JavaScript中的所有函数都是Function类型的对象 定义函数的方式 函数声明方式 function 函数...

    AprilJ 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<