vue.js - vue 功能组件中的 "reference"指的是什么？

Question

最近在看 Vue 的文档，在看函数式组件的时候，发现了这样一句话:

Note: in versions before 2.3.0, the props option is required if you wish to accept props in a functional component. In 2.3.0+ you can omit the props option and all attributes found on the component node will be implicitly extracted as props.

The reference will be HTMLElement when used with functional components because they’re stateless and instanceless.

可以查看原文档 here .
我对第二个引用中的“引用”这个词很困惑，这个“引用”是什么意思？
希望有人能帮我弄清楚，谢谢我的 friend :)

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 是功能组件的渲染函数的责任。数据到它呈现的其中一个 child 。在上面的例子中， ctx.data.ref等于 'func'它被分配给 <button> ，所以在根组件 this.$refs.func等于那个 DOM 元素。如果我没有通过 ctx.data到按钮，然后 this.$refs.func将永远是 undefined .