Vue中使用Render函数个JSX

Render函数

render函数是组件渲染的重要核心，它跟template模板开发一样，只不过这种形式开发，它(render)更接近底层，这样能让Vue编译时少转换一次。

让我们来看一下哪里能用到render函数。

我们都知道Vue项目入口文件main.js里面有个render函数长下面这样，将项目的App根组件，挂载到根实例上通过render渲染。

new Vue({
  render: h => h(App)
}).$mount('#app')

我们来解刨一下render函数身体。 我们来解刨一下render函数身体。

• render函数返回值是一个VNode -> "virtual node"虚拟节点

• render函数的参数是一个createElement函数

官网所示参数如下

// @returns {VNode}  
createElement(  
// {String | Object | Function}  
 // 一个 HTML 标签名、组件选项对象，或者  
// resolve 了上述任何一种的一个 async 函数。必填项。  
    'div',  
  
// {Object}  
 // 一个与模板中 attribute 对应的数据对象。可选。  
    {  
// attrs/props等属性
    },  
  
// {String | Array}  
 // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，  
// 也可以使用字符串来生成“文本虚拟节点”。可选。  
    [  
    '先写一些文字',  
    createElement('h1', '一则头条'),  
        createElement(MyComponent, {  
            props: {  
            someProp: 'foobar'  
            }  
        })  
    ]  
)

官网的实例 有了这些知识，我们现在可以完成我们最开始想实现的组件：

JSX

使用原生render形式写会非常麻烦，有一个 Babel 插件，用于在 Vue 中使用 JSX 语法，它可以让我们回到更接近于模板的语法上。

将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的。从 Vue 的 Babel 插件的 3.4.0 版本开始，我们会在以 ES2015 语法声明的含有 JSX 的任何方法和 getter 中 (不是函数或箭头函数中) 自动注入 const h = this.$createElement，这样你就可以去掉 (h) 参数了。对于更早版本的插件，如果 h 在当前作用域中不可用，应用会抛错。

export default {
 data() {
  return {
   name: "前端娱乐圈",
   dataList: {
    title: "前端娱乐圈",
    href: "www.baidu.com"
   }
  }
 },
    render() {
        return <div onClick={this.xxx} {...{attrs: this.dataList}}>{ this.name }</div>
    }
}