快速入门vue-render__Vue.js
发布于 4 年前 作者 banyungong 1586 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

render 函数,大部分工老油条,应该是比较了解了,但是可能有些初出茅庐的小年轻们,不是很了解,并且严老湿也去网上查阅了一些相关的文章,总结了一下,不够系统,所以今天简单聊一下,循环渐进

render 函数是什么

​ 平常我们写 <template> 里面所使用模板HTML语法组建页面的,其实在 vue 中都会编译成 render 函数,因为vue 中采用的是 虚拟DOM 所以拿到template模板时也要转译成 VNode(virtual node 虚拟节点) 函数

插一嘴 虚拟DOM真实DOM 的区别

虚拟DOM不会进行排版与重绘操作 ,虚拟DOM就是把真实DOM转换为Javascript代码,并且真实DOM频繁操作排版、重绘效率相比虚拟DOM 效率会低很多,比如原生操作真实DOM浏览器会从构建DOM树开始从头到尾执行一遍流程。而虚拟DOM是用Object来代表一颗节点,这个Object叫做VNode,然后使用两个VNode进行对比,根据对比后的结果修改真实DOM

浏览器渲染引擎工作流程

浏览器渲染引擎工作流程
浏览器渲染引擎工作流程

虚拟DOMVNode又涉及到diff算法,所以我们先暂停这里,开始我们的正文,当然有兴趣的小伙伴们可以去查阅相关资料

render 函数的使用

先看看我们平常vue中的写法

<template>
 <div>
     <h1>严老湿</h1>
    </div>
</template>

如果使用render函数将是怎样呢?

<script>
    export default {
        render(createElement){
            // createElement:
            // 第一个参数是标签名类型必须是String
            // 第二个是属性值 我们后面来讲,类型是Object
            // 第三个是子级虚拟节点 (VNodes) 可以是String|Array
            return createElement('h1',{},"严老湿")
        }
    }
</script>

这样我们也是一样的可以实现 template 中的元素

image-20200906191922514
image-20200906191922514

动态接收参数

修改以下上面的代码,我们再来试试

<script>
    export default {
        props:{
            tag:{
                type:String,
                requiredtrue
            }
        },
        render(createElement){
            return createElement(this.tag,{},"严老湿")
        }
    }
</script>

在父组件中传值给子组件动态切换标签

<sub-components tag="button"></sub-components>
image-20200906204253646
image-20200906204253646

原来可以这样操作,那我们在玩点其他的呗

<script>
    export default {
        props: {
            tag: {
                typeString,
                requiredtrue,
            },
            data: {
                typeArray,
                required:true
            },
        },
        render(createElement) {
            return createElement(this.tag, {},
                // 嵌套到 this.tag 元素上
                this.data.map(item=>
                    createElement('li',{},item.toString())
                )
            );
        },
    };
</script>

父组件传值

<sub-components tag="ul" :data="data"></sub-components>

data:["新冠病毒灭活疫苗首次亮相","辽宁副省长卢柯拿下科学大奖","阚清子说朱一龙神秘"]

看看效果

image-20200906210340177
image-20200906210340177

createElement 的属性

我们刚刚使用了createElement的第一个和第三个参数

现在来看看第二个参数,为什么拿到后面来讲了,因为里面的东西比较多

嗯?重头戏么

接着来看看就知道啦

class

<script>
    export default {
        props: {
            tag: {
                typeString,
                requiredtrue,
            },
            data: {
                typeArray,
                required:true
            },
        },
        render(createElement) {
            return createElement(this.tag, {}, 
                this.data.map(item=>
                    createElement('li',{
                     // 首先上场的是class
                        class:'child-element'
                     // or
                     // domProps
{className: "child-element"},
                    },item.toString())
                )
            );
        },
    };
</script>
image-20200906211340374
image-20200906211340374

我们给li 标签加上了class之后,可以直接在元素上看到 child-element ,然后想修改样式的呢,直接通过选择器修改就好了,这就不用多说了吧!

on

再来看看事件系列

<script>
    export default {
        props: {
            tag: {
                typeString,
                requiredtrue,
            },
            data: {
                typeArray,
                required:true
            },
        },
        render(createElement) {
            return createElement(this.tag, {}, 
                this.data.map(item=>
                    createElement('li',{
                        domProps: {
                            className"child-element"
                        },
                     // 在on中我们可以写需要的事件
                        on:{
                            // 点击事件 点击打印 Pointer Event
                            click:(e)=>{
                                console.log(e)
                            },
                            // mouseover
        // mouseout
                        }
                    },item.toString())
                )
            );
        },
    };
</script>

打印结果:

image-20200906212945930
image-20200906212945930

里面还有很多好玩的东西可以去看看 vue2.0 官方文档

https://cn.vuejs.org/v2/guide/render-function.html#createElement-%E5%8F%82%E6%95%B0

如 :styleattrsdirectives 等等....

vue组件

如果看过 render 源码的同学应该知道,我们刚刚所说的第一个参数 tag 不仅仅可以是标准的html标签。tag 可以分为正常html标签 | vue组件 两类 。之前已经学了html标签,接下来 我们来看看vue组件

首先我们新建一个 vue 组件

<template>
    <div>
        {{content}}
    </div>

</template>

<script>
export default {
    props:{
        content:{
            type:String
        }
    }
}
</script>

在render函数页面中引入

<script>
    // 引入组件
    import Widget from './Widget'
    export default {
        render(createElement) {
            // 传入组件
            return createElement(Widget, {
                // 传值 content
                props:{
                    content:"hello CrazyYan"
                }
            });
        },
    };
</script>

ok 返回到页面上,我们已经看到了组件

image-20200906215011223
image-20200906215011223

我们学到这里,应该知道

  • render函数的作用
  • 它的简单使用方法
  • 几个参数的作用
- END -

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 悲伤日记 原文链接:https://juejin.im/post/6869552527965159431

回到顶部