vue 功能组件中的“参考”指的是什么？

Question

最近在看vue的文档，在看功能组件的时候，发现有这样一句话：

注意：在 2.3.0 之前的版本中，如果您希望在功能组件中接受 props，则需要 props 选项。在 2.3.0+ 中可以省略 props 选项，组件节点上的所有属性都将被隐式提取为 props。

与功能组件一起使用时，引用将是 HTMLElement，因为它们是无状态和无实例的。

可以查看原文档here。

我对第二个引用中的“参考”一词感到非常困惑，这个“参考”是什么意思？

希望有人能帮我弄清楚，谢谢我的朋友:)

Answer 1

我不是 100% 确定，但我认为它指的是这种情况：

Vue.component('functional', {
  functional: true,
  render(h, ctx) {
    return h('button', ctx.data, ctx.children)
  }
})

Vue.component('full', {
  template: '<button><slot/></button>'
})

new Vue({
  el: '#app',
  mounted() {
    console.log(this.$refs.func instanceof HTMLElement)
    console.log(this.$refs.full instanceof Vue)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <functional ref="func">Functional</functional>
  <full ref="full">Full</full>
</div>

如果你得到一个函数组件的引用，你可能不会得到一个组件实例，因为函数组件本身没有一个组件实例。

最好将函数式组件视为一个函数。它不是一个“真正的”组件。

返回的 ref 取决于功能组件的实现方式。功能组件的渲染函数负责将ref 数据传递给它所渲染的子组件之一。在上面的示例中，ctx.data.ref 等于 'func' 并被分配给 <button>，因此在根组件中 this.$refs.func 等于该 DOM 元素。如果我没有将ctx.data 传递给按钮，那么this.$refs.func 将永远是undefined。