vue 函数式组件不生效 - render 函数要返回一个 vNode

Vue 在选项对象中提供一个 render 方法可以函数式编写渲染内容： render。
一定要注意的是：return 的一定要是 vNode（createElement 方法返回的结果），否则内容不会显示，也不会报错。

今天在项目中使用函数式组件，截取指定字数的文本，怎么搞都不显示返回结果，render 方法也是执行了，后来发现是返回内容的格式问题。

原代码：

export default {
  functional: true,
  props: ['text', 'max'],
  render: (createElement, content) => {
  	console.log('测试执行') // 正常打印
    const { text, max } = content.props
    return text.slice(0, max)
  },
}

去官方看了下文档，这里并没有提示要返回什么格式的内容：

# render

• 详细：

  字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

纠结了很久，开始回忆源码中 render 方法的使用，才发现这个方法要返回一个 VNode（ 虚拟 DOM 对象），用于挂载或Diff对比。

修改了代码后，内容正常显示：

export default {
  functional: true,
  props: ['text', 'max'],
  render: (createElement, content) => {
    const { text, max } = content.props
    return createElement('div', text.slice(0, max))
  },
}