vue渲染函数&JSX

简介: Vue推荐在绝大多数情况下使用template来创建你的HTML。然而在一些场景中,你真的需要JavaScript的完全编程能力,这时你可以使用render函数,它比template跟接近编译器.虚拟DOM在深入渲染函数之前,了解一些浏览器的工作原理很重要。

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

虚拟DOM

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


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

当浏览器读到这些代码时,它会建立一个‘DOM节点树’来保持追踪,如同你会画一张家谱树来追踪家庭成员的发展一样。
HTML的DOM节点树如下图所示:

每个元素都是一个节点。每片文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一个部分。就像家谱树一样,每个节点都可以有孩子节点(也就是说每个部分可以包含其它一些部分)。
高效的更新所有这些节点会是比较困难的,不过所幸你不必再手动完成这个工作了。你只需要告诉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
        }
    }
})

原文地址:https://segmentfault.com/a/1190000017354905

相关文章
|
13天前
|
JavaScript
vue 渲染树型数据(含树型数据转化为一维数组的方法,包括每个节点的深度和深度列表)
vue 渲染树型数据(含树型数据转化为一维数组的方法,包括每个节点的深度和深度列表)
15 0
|
13天前
|
JavaScript
vue3 中借助 tsx 使用 JSX (以实现字体下拉选择为例)
vue3 中借助 tsx 使用 JSX (以实现字体下拉选择为例)
20 0
|
13天前
vue3 中 h 函数的使用
vue3 中 h 函数的使用
10 0
|
14天前
|
JavaScript
vue v-for循环渲染动态ref表单校验的实现技巧
vue v-for循环渲染动态ref表单校验的实现技巧
42 0
|
15天前
|
设计模式 JavaScript 前端开发
|
15天前
|
JavaScript 前端开发 测试技术
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1016 0
|
5天前
|
JavaScript
|
6天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
20 6
|
4天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
21 2