精华内容
下载资源
问答
  • render函数

    2021-01-12 14:32:48
    render函数实现 render函数插槽使用 render函数修饰符

    render函数实现在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    render函数插槽使用
    在这里插入图片描述
    render函数修饰符
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • Render函数

    2018-06-10 13:04:35
    Render函数 Vue2与Vue1最大的区别就在于Vue2使用了虚拟DOM来更新DOM节点,提升渲染性能。 虚拟DOM React和Vue2都使用了虚拟DOM技术,虚拟DOM并不是真正意义上的DOM,而是一个轻量级的JavaScript对象,在状态发生变化...
        

    Render函数

    Vue2与Vue1最大的区别就在于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 是否作为根节点插入,被<transition>包裹的节点,该属性的值为false
    • isConment 当前节点是否是注释节点。
    • isCloned 当前节点是否为克隆节点。
    • isOnce 当前节点是否有v-once指令。

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

    • TextVNode 文本节点。
    • ElementVNode 普通元素节点。
    • ComponentVNode 组件节点。
    • EmptyVNode 没有内容的注释节点。
    • CloneVNode 克隆节点,可以是以上任意类型的节点,唯一的区别在于isCloned属性为true

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

    <p data-height="265" data-theme-id="0" data-slug-hash="wXozpg" data-default-tab="html,result" data-user="whjin" data-embed-version="2" data-pen-title="Vue-render函数" class="codepen">See the Pen Vue-render函数 by whjin (@whjin) on CodePen.</p>
    <script async src="https://static.codepen.io/ass...;></script>

    createElement用法

    基本参数

    createElement构成了Vue虚拟DOM的模板,它有3个参数:

    createElement(
        //{String | Object | Function}
        //一个HTML标签,组件选项,或一个函数
        //必须return上面其中一个
        'div',
        //{Object}
        //一个对应属性的数据对象,可选
        //可以在template中使用
        //{String | Array}
        //子节点(VNode),可选
        [
            createElement('h1','hello world'),
            createElement(MyComponent,{
                props:{
                    someProp:'foo'
                }
            }),
            'bar'
        ]
    );
    

    第一个参数必选,可以是一个HTML标签,也可以是一个组件或函数;第二个是可选参数,数据对象,在template中使用。第三个是子节点,也是可选参数,用法一直。

    之前在template中都是在组件的标签上使用v-bind:classv-bind:stylev-on:click这样的指令,在Render函数都将其写在了数据对象中。

    约束

    所有的组件树中,如果VNode是组件或含有组件的slot,nameVNode必须唯一。

    在Render函数里创建了一个cloneVNode的工厂函数,通过递归将slot所有子节点都克隆了一份,并对VNode的关键属性也进行复制。

    使用JavaScript代替模板功能

    在Render函数中,不再需要Vue内置的指令,比如v-ifv-for。无论要实现什么功能,都可以使用原生JavaScript。

    <p data-height="265" data-theme-id="0" data-slug-hash="eKgVgQ" data-default-tab="html,result" data-user="whjin" data-embed-version="2" data-pen-title="render--v-for" class="codepen">See the Pen render--v-for by whjin (@whjin) on CodePen.</p>
    <script async src="https://static.codepen.io/ass...;></script>

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

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

    <p data-height="265" data-theme-id="0" data-slug-hash="BVpYdd" data-default-tab="html,result" data-user="whjin" data-embed-version="2" data-pen-title="Vue-render-API" class="codepen">See the Pen Vue-render-API by whjin (@whjin) on CodePen.</p>
    <script async src="https://static.codepen.io/ass...;></script>

    v-model就是prop:valueevent:input组合使用的一个语法糖,虽然在Render里写起来比较复杂,但是可以自由控制,深入到更底层。

    对于事件修饰符和按键修饰符,基本需要自己实现:

    修饰符 对应的句柄
    .stop event.stopPropagation()
    .prevent event.preventDefault()
    .self if(event.target!==event.currentTarget) return
    .ente.13 if(event.keyCode!==13) return替换13位需要的keyCode
    .ctrl.alt.shift.meta if(!event.ctrlKey) return根据需要替换ctrlKeyaltKeyshiftKeymetaKey

    对于事件修饰符.capture.once,Vue提供了特殊的前缀,可以直接写在on的配置里。

    修饰符 前缀
    .capture !
    .once ~
    .capture.once.once.capture ~!

    写法如下:

    on: {
        '!click': this.doThisInCapturingMode,
            '~keyup': this.doThisOnce,
            '~!mouseover': this.doThisOnceInCapturingMode
    }
    

    简单模拟聊天发送内容的场景:

    <p data-height="265" data-theme-id="0" data-slug-hash="ZRLrPN" data-default-tab="html,result" data-user="whjin" data-embed-version="2" data-pen-title="Vue-模拟聊天发送内容" class="codepen">See the Pen Vue-模拟聊天发送内容 by whjin (@whjin) on CodePen.</p>
    <script async src="https://static.codepen.io/ass...;></script>

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

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

    展开全文
  • 终于搞懂了vue 的 render 函数(一) -_-|||

    万次阅读 多人点赞 2018-10-11 20:32:18
    文章目录render 函数作用render 函数讲解render 函数的返回值(VNode)render 函数的参数(createElement)createElement 函数的返回值(VNode)createElement 函数的参数(三个)结合代码 vue渲染函数文档第一遍看...


    第二篇传送门:终于搞懂了vue 的 render 函数(二)(๑•̀ㅂ•́)و✧


    vue渲染函数文档第一遍看的晕晕乎乎的,再看看写写终于清晰了。建议配合文档阅读,本文也是根据文档加上自己的理解。

    注:本文代码都是在单文件组件中编写。代码地址

    render 函数作用

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

    官网例子:子组件想要根据父组件传递的 level 值(1-6)来决定渲染标签 h 几。具体代码可以看文档。

    render 函数讲解

    render 函数即渲染函数,它是个函数,它的参数也是个函数——即 createElement,我们重点来说 createElement 参数

    1. render 函数的返回值(VNode)

      VNode(即:虚拟节点),也就是我们要渲染的节点。

    2. render 函数的参数(createElement)

      createElementrender 函数 的参数,它本身也是个函数,并且有三个参数。

      1. createElement 函数的返回值(VNode)

        createElement 函数的返回值是 VNode(即:虚拟节点)。

      2. createElement 函数的参数(三个)

        1. 一个 HTML 标签字符串,组件选项对象,或者解析上述任何一种的一个 async 异步函数。类型:{String | Object | Function}。必需
        2. 一个包含模板相关属性的数据对象你可以在 template 中使用这些特性。类型:{Object}。可选。
        3. 子虚拟节点 (VNodes),由 createElement() 构建而成,也可以使用字符串来生成“文本虚拟节点”。类型:{String | Array}。可选。
      3. 结合代码

         /**
          * render: 渲染函数
          * 参数: createElement
          * 参数类型: Function
         */
         render: function (createElement) {
           let _this = this['$options'].parent	// 我这个是在 .vue 文件的 components 中写的,这样写才能访问this
           let _header = _this.$slots.header   	// $slots: vue中所有分发插槽,不具名的都在default里
         
           /**
            * createElement 本身也是一个函数,它有三个参数
            * 返回值: VNode,即虚拟节点
            * 1. 一个 HTML 标签字符串,组件选项对象,或者解析上述任何一种的一个 async 异步函数。必需参数。{String | Object | Function} - 就是你要渲染的最外层标签
            * 2. 一个包含模板相关属性的数据对象你可以在 template 中使用这些特性。可选参数。{Object} - 1中的标签的属性
            * 3. 子虚拟节点 (VNodes),由 `createElement()` 构建而成,也可以使用字符串来生成“文本虚拟节点”。可选参数。{String | Array} - 1的子节点,可以用 createElement() 创建,文本节点直接写就可以
            */
           return createElement(       
             // 1. 要渲染的标签名称:第一个参数【必需】      
             'div',   
             // 2. 1中渲染的标签的属性,详情查看文档:第二个参数【可选】
             {
               style: {
                 color: '#333',
                 border: '1px solid #ccc'
               }
             },
             // 3. 1中渲染的标签的子元素数组:第三个参数【可选】
             [
               'text',   // 文本节点直接写就可以
               _this.$slots.default,  // 所有不具名插槽,是个数组
               createElement('div', _header)   // createElement()创建的VNodes
             ]
           )
         }
        

    可以看下控制台中打印出来的 $slots
    在这里插入图片描述
    ⚠️ 从 2.6.0 开始,官方文档推荐使用作用域插槽访问所有 $slots,具体见终于搞懂了vue 的 render 函数(二)(๑•̀ㅂ•́)و✧

    展开全文
  • 用过 React 开发的人对 render 函数应该非常熟悉,因为React组件通过 JSX和 render 函数来构建的。尽管Vue render 函数也可以用JSX编写,但在这里我们使用原生 JS方式,因为这样,我们可以更轻...

    我们知道 Vue 模板是非常强大的,基本可以完成我们日常开发的所有任务。但是,有一些用例,如基于输入或插槽值创建动态组件方式,render 函数会比模板完成的更好也更出色。

    用过 React 开发的人对 render 函数应该非常熟悉,因为React组件通过 JSX和 render 函数来构建的。尽管Vue render 函数也可以用JSX编写,但在这里我们使用原生 JS方式,因为这样,我们可以更轻松地了解Vue组件系统的一些基础。

    值得注意的是,Vue 的模板实际上在编译时也是会先解析成 render 函数表示方式。模板只是在render 函数之上提供了一个方便且熟悉的语法糖。尽管 render 函数更强大,但render函数可读性很差,相对用的也比较少了。

    创建组件

    带有 render 函数的组件没有template标记或属性。相反,该组件定义了一个了名为render的函数,该函数接收一个reateElement(renderElement: String | Component, definition: Object, children: String | Array)参数(由于某种原因,通常别名为h,归咎于JSX)并返回使用该函数创建的元素,其他一切保持不变,来看看事例:

    7fec84cb4569e7b0ba9c7e74024d5ca7.png

    render 函数中如何表示指令

    Vue 模板具有各种便捷功能,以便向模板添加基本逻辑和绑定功能,如 v-if、v-for、v-moel指令等。在render函数中是无法使用这些指令的。取而代之的是以纯 JS 来实现,对于大多数指令而言,这也是比较简单的。

    v-if

    v-if 用纯 JS 实现很简单,只需围绕createElement调用使用 if(expr)语句即可。

    v-for

    v-for可以使用for-of,Array.map,Array.filter等的JS方法中的任何一种来实现。我们可以通过非常有趣的方式将它们组合在一起,以实现过滤或状态切片,而无需计算属性。

    例如,有以下 Vue 的模板代码

    04bfa41a823bef0bdfa77953c99209f5.png

    可以用下面的 render 函数来实现上面的效果:

    render(h) {  return h('ul', this.pod.map(pea => h('li', pea.name)));}

    v-model

    我们知道,v-model只是bind属性与value的语法糖,并在触发input事件时设置数据属性。但是,在render函数没有这样的简写,我们需要自己实现。

    假设,在 Vue 中,我们有如下的结构:

      

    上面代码等价于:

    7f2891c5a17347f35055adad04d1fa62.png

    在 render 函数中可以用下面方式来实现上面的代码:

    6a566cf4628dba9be5f103687cdac1ae.png

    v-bind

    attribute和property 这两种类型的绑定被放在元素定义中,如arttrs、props和domProps( value 和innerHTML之类的东西)。

    7c37afacfdaa512387111bb732cce658.png

    需要注意的是,对于 class和style的绑定是直接在定义的根进行处理,而不是作为attrs,props或domProps处理。

    1d83771c165e98070da0770d0b46d65b.png

    v-on

    对事件处理程也是直接添加到元素定义中 on 定义

    c1052855be05e74189262a2d592648fa.png
    ad9d682eea523a6bd843d3cf1722d500.png

    特殊属性

    Slots 可以通过this.$slots作为createElement()节点的数组来访问插槽。

    作用域插槽存储在this.$scopedSlots[scope](props:object) 中,作为返回createElement()节点数组的函数。


    原文:https://vuejsbook.com/introduction-to-vue-render-functions-with-examples作者:Joshua Bemenderfer 译者:前端小智 来源:vuejsbook.com

    展开全文
  • iview 的render函数就是vue的render函数 iview常用在表格里面自定义内容 render函数常用的配置 h就是createdElement的简写 3个参数如下: h("元素名称或组件名称", { domProps: { // 原生dom元素的一些属性 value:...
  • Render函数 9

    2019-10-11 14:28:38
    Render函数
  • 1.render 函数作用 render 函数跟template一样都是创建 html 模板的,但是有些场景中用template实现起来代码冗长繁琐而且有大量重复,这时候就可以用render 函数。 2.render 函数讲解 render 函数即渲染函数,它...
  • render 函数讲解

    2020-11-24 14:12:08
    render 函数讲解 render 函数即渲染函数,它是个函数,它的参数也是个函数——即createElement,我们重点来说createElement 参数。 render 函数的返回值(VNode) VNode(即:虚拟节点),也就是我们要渲染的...
  • 介绍本篇同样是作为Vue的学习篇,要介绍的是Vue的Render函数,笔者也是初学者,如果遇到不对的或者有好的建议可以到评论区留言分享!从一个示例开始我们已经看到了组件及其用法。例如,我们有一个需要在整个项目中...
  • ivew render函数

    2020-12-21 16:31:04
    1.render函数是做什么的? render函数和template一样,是用来创建html模板的, 一些特殊场景用template创建模板代码会冗长,此时用render函数写就会简单很多。 例:Vue官网案例:...
  • render函数与箭头函数

    2020-07-05 20:49:15
    render函数与箭头函数render函数render函数怎么用箭头函数1. 箭头函数基本形式2. 箭头函数基本特点a.箭头函数this为父作用域的this,不是调用时的thisb.箭头函数不能作为构造函数,不能使用newc. 箭头函数没有...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,435
精华内容 2,974
关键字:

render函数