Vue语法之render函数和JSX的基本使用

Vue中提供了一种灵活的渲染方式—— render 函数和 JSX 语法，它们可以帮助我们更精细化地控制组件的渲染过程，实现更加灵活的代码编写。

render函数

render 函数是 Vue 中的一个非常重要的函数，它用于渲染虚拟 DOM，我们可以通过定义 render 函数来自定义组件的渲染方式。

render 函数接收一个 createElement 的参数，用于创建虚拟 DOM 节点。

基础使用

下面是一个简单的 render 函数，用于创建一个带文本内容的 div 节点：

render(h) {
  return h('div', 'hello, render')
}

这个 render 函数接收一个参数 h，通过 h 创建了一个 div 元素，并且在其中添加了文本内容 hello, render。

渲染组件

我们可以通过 render 函数来渲染组件，例如：

render(h) {
  return h(MyComponent)
},
components: {
  MyComponent
}

这个 render 函数将渲染名为 MyComponent 的组件。在前面的代码中，我们先在 components 中注册了 MyComponent，接着在 render 函数中使用了它来创建虚拟 DOM节点。

渲染子节点

下面是一个 render 函数的例子，用于创建一个带有两个子节点的 div 节点：

render(h) {
  return h('div', [
    h('p', '第一个子节点'),
    h('p', '第二个子节点')
  ])
}

在这个例子中，我们使用了数组方式替换了文本内容，它包含了两个子节点，分别是两个段落元素。

JSX

JSX 是一种 JavaScript 的语法扩展，可以让我们使用类 HTML 代码来创建 React 元素。Vue 也支持 JSX 语法，可以用来替代 render 函数来创建虚拟 DOM 节点。

基础使用

下面是一个基础的 JSX 示例，用于创建一个简单的 div 元素：

render() {
  return <div>hello, JSX</div>
}

在这个例子中，我们使用了类似 HTML 的语法来创建了一个 div 元素，并且在其中添加了文本内容 hello, JSX。

渲染子节点

在 JSX 中我们可以使用大括号 {} 来进行变量或者表达式的嵌入，例如，下面的示例用于创建一个带有两个子节点的 div 元素：

render() {
  return (
    <div>
      <p>第一个子节点</p>
      <p>第二个子节点</p>
    </div>
  )
}

在这个示例中，我们使用了大括号，将两个段落元素修改成了 JSX 的形式。

结束语

render 函数和 JSX 语法是 Vue 用于自定义组件渲染的两种方式。它们的使用可以帮助我们更精细化地控制组件的渲染过程，从而实现更加灵活的编码。