脚本宝典收集整理的这篇文章主要介绍了

vue渲染函数&JSX

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

Vue推荐在绝大多数情况下使用template来创建你的HTML。然而在一些场景中,你真的需要JavaScript的完全编程能力,这时你可以使用render函数,它比template跟接近编译器.

虚拟DOM

在深入渲染函数之前,了解一些浏览器的工作原理很重要。以下面这段HTML为例:

<div>
    <h1>My title</h1>
    Some text content
    <!--TODO:添加标签行-->
</div>

当浏览器读到这些代码时,它会建立一个‘DOM节点树’来保持追踪,如同你会画一张家谱树来追踪家庭成员的发展一样。
HTMLDOM节点树如下图所示:
vue渲染函数&JSX-脚本宝典
每个元素都是一个节点。每片文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一个部分。就像家谱树一样,每个节点都可以有孩子节点(也就是说每个部分可以包含其它一些部分)。
高效的更新所有这些节点会是比较困难的,不过所幸你不必再手动完成这个工作了。你只需要告诉Vue你希望页面上的HTML是什么,这可以是在一个模板里:

<h1>{{blogTitle}}</h1>

或则一个渲染函数里:

render:function(createElement){
    return createElement('h1',this.blogTitle);
}

在这两种情况下,Vue都会自动保持页面的更新,即便blogTitle发生了改变。

Vue通过建立一个虚拟DOM对真实的DOM发生的变化保持追踪。请仔细看这行代码:

return createElement('h1',this.blogTitle)

createElement到底返回什么呢?其实不是一个实际的Dom元素。它更准确的名字可能是createNodeDescription,因为它所包含的信息会告诉Vue页面上需要渲染什么样的节点,及其子节点。我们把这样的节点描述为虚拟节点,也常简写为VNode。虚拟DOM是我们对Vue组件树建立起来的整个VNode树的称呼。

createElement参数

createElement(
    //{String|Object|Function}
    //一个HTML标签字符串,组件选项对象,或则解析上述任何一种的一个async异步函数。必须参数。
    'div',
    
    //{Object}一个包含模板相关属性的数据对象,你可以在template中使用这些特性。可选参数。
    {},
    
    //{String|Array}子虚拟节点,由createElement()构建而成,也可以使用也可以使用字符串来生成文本虚拟节点。可选参数。
    [
        '先写一些文字',
        createElement('h1','一则头条'),
        createElement(Mycomponent,{
            props:{
                someProp:'foobar'
            }
        })
    ]
    
)

深入data对象

有一点要注意:正如在模板语法中,v-bind:class和v-bind:style,会被特别对待一样,在VNode数据对象中,下列属性名是级别最高的字段。该对象也允许你绑定普通的HTML特性,就像DOM属性一样,比如innnerHTML(这会取代v-html指令)。

{
    //和v-bind:class一样的API,接收一个字符串、对象或字符串和对象组成的数组
    'class':{
        foo:true,
        bar:false
    },
    //和v-bind:style一样的API,接收一个字符串、对象或对象数组组成的数组
    style:{
        color:'red',
        fontSize:'14px'
    },
    //普通的HTML特性
    attrs:{
        id:'foo'
    },
    //组件props
    props:{
        myPro:'bar'
    },
    //DOM属性
    domProps:{
        innerHTML:'baz'
    },
    //事件监听器基于'on',所以不再支持如v-on:keyup.enter修饰符,需要手动匹配keyCode.
    on:{
        click:this.clickHandler
    },
    //仅用于组件,用于监听原生事件,而不是组件内部使用,vm.$emit触发的事件。
    nativeOn:{
        click:this.nativeClickHandler
    },
    //自定义指令。注意,你无法对binding中的oldValue赋值,因为Vue已经自动为你进行了同步。
    directives:[
        {
            name:'my-custom-directive',
            value:'2',
            expression:'1+1',
            arg:'foo',
            modifiers:{
                bar:true
            }
        }
    ],
    //作用域插槽格式,{name:props=>createElement('span',props.text)}
    scopedSlots:{
        default:props=>createElement('span',props.text)
    },
    //如果组件是其它组件的子组件,需要为插槽指定名称。
    slot:'name-of-slot',
    //其它特殊顶层属性
    key:'myKey',
    ref:'myRef',
    //如果你在渲染函数中向多个元素都应用了相同的ref名,那么$refs.myRef会变成一个数组。
    refInFor:true
}

完整示例

有了这些知识,我们现在可以完成我们最开始想实现的组件:

var getChildrenTextContent = function(children){
    return children.map(function(node){
        return node.children
        ?getChildrenTextContent(node.children)
        :node.text
    }).join('')
}
Vue.component('anchord-heading',{
    render:function(createElement){
        //创建kebab-case风格的ID
        var headingId = getChildrenTextContent(this.$slots.default)
            .toLowerCase()
            .replace(/W+/g,'-')
            .replace(/(^-|-$)/g,'')
        return createElement(
            'h'+this.level,
            [
                createElement('a',{
                    attrs:{
                        name:headingId,
                        href:'#'+headingId
                    }
                },this.$slots.default)
            ]
        )
    },
    props:{
        level:{
            type:Number,
            required:true
        }
    }
})

约束

VNodes必须唯一
组件树中的所有VNodes必须是唯一的。这意味着,下面的render function是无效的:
render:function(createElement){

var myParagraphVNode = createElement('div',[
    //错误-重复的VNodes
    myParagraphVNode,myParagraphVNode
])

}
如果你真的需要重复很多次的元素/组件,你可以使用工厂函数来实现。例如,下面这个例子render函数完美有效地渲染了20个相同的段落:

render:function(createElement){
    return createElement('div',
        Array.apply(null,{length:20}).map(function(){
            return createElement('p','hi')
        })
    )
}

总结

以上是脚本宝典为你收集整理的

vue渲染函数&JSX

全部内容,希望文章能够帮你解决

vue渲染函数&JSX

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过