vue中的render函数、h()函数、函数式组件详解

1. Vue中的render函数

Vue中的render函数是一个函数式的组件，它可以将一个虚拟的DOM节点渲染成实际的DOM节点。

在Vue2.x版本中，我们可以使用两种方式来创建组件：使用template或者使用render函数。

render函数是一个函数，它接收一个createElement函数作为参数，用来创建虚拟的DOM节点，然后返回这个节点，用来渲染页面。在使用render函数时，我们需要手动写出HTML结构。

1. h()函数

h函数是createElement函数的别名，用于创建虚拟的DOM节点。它的格式如下：

h(tag, [props], [...children])

tag表示要创建的节点的标签名，props表示节点的属性，children表示节点的子节点。

下面是一个使用h函数创建虚拟DOM节点的示例：

import { h } from 'vue';

const vnode = h('div', { class: 'box' }, [
    h('h1', 'Hello World!'),
    h('p', 'A paragraph')
]);

console.log(vnode);

这里使用h函数创建了一个包含两个子节点h1和p的div节点，并添加了一个class属性。在控制台中输出了该虚拟节点的内容。

1. 函数式组件

函数式组件是一种高效的组件实现方式。它通过函数返回一个虚拟节点来表示组件。与常规组件不同的是，函数式组件没有实例，没有状态和生命周期方法。

函数式组件有以下特点：

• 在实现上更加简单，执行效率更高。
• 只接受一个props参数，不接受其它参数。
• 没有状态，也不能访问this上下文。

下面是一个简单的函数式组件示例：

import { h } from 'vue';

const MyButton = (props, context) => {
    return h(
        'button',
        {
            onClick: () => {
                context.emit('onClick');
            }
        },
        props.label
    )
};

export default MyButton;

在这个示例中，我们创建了一个函数式组件MyButton，它返回一个button节点，当点击这个按钮时，会触发一个名为onClick的事件。

在使用这个组件时，可以如下引入并使用：

<template>
  <div>
    <my-button label="Click Me!" @onClick="onClick" />
  </div>
</template>

<script>
import MyButton from './MyButton.vue'

export default {
  components: {
    MyButton
  },
  methods: {
    onClick () {
      console.log('button clicked')
    }
  }
}
</script>

以上是对“vue中的render函数、h()函数、函数式组件”进行的详细讲解，并附有两个示例说明。