17、Vue开发中渲染函数、JSX及博客功能实现全解析

Vue开发中渲染函数、JSX及博客功能实现全解析

1. 渲染函数基础

在Vue开发里，渲染函数有着重要作用。 createElement 函数是创建元素的关键，它能创建DOM元素或者Vue组件，最多可接收三个参数：
- element（必需） ：可以是HTML标签名、已注册组件的ID，或者直接是组件定义对象，也能是返回这些内容的函数。
- data（可选） ：即数据对象，用于指定CSS类、props、事件等信息。
- children（可选） ：可以是文本字符串，或者是用 createElement 构建的子元素数组。

通常会用 h 作为 createElement 的别名，它源于描述“用JavaScript编写HTML”的超文本脚本术语。例如下面这个渲染函数：

export default {
  props: ['message'],
  render (h) {
    return h('p', { class: 'content' }, this.message)
  },
}

它等价于以下模板：

<template>
  <p class="content">{
  
  { message }