vue3.2 中新出的 expose 是做啥用的？下面本篇文章带大家好好了解下vue3.2的expose工具，希望对大家有所帮助！
随着vue 3.2的发布，一个新的组合工具提供给我们，叫做 expose。（学习视频分享：vue视频教程）
你是否曾经创建过一个需要向模板提供一些方法和属性的组件，但又希望这些方法对组件是私有的，不能被父类调用？
如果你在开发一个开源的组件或库，你有可能想保持一些内部方法的私有性。在vue 3.2之前，这并不容易实现，因为所有在选项api中声明的方法或数据等都是公开的，所以模板可以访问它。
组合api也是如此。我们从setup方法中返回的所有东西都可以被父类直接访问。
组合 api让我们看一个实际的例子。想象一下，我们有一个组件，它创建了一个计数器，每一秒都会更新这个计数器。
** mycounter.vue**
<template> <p>counter: {{ counter }}</p> <button @click="reset">reset</button> <button @click="terminate">☠️</button></template><script>import { ref } from 'vue'export default { setup () { const counter = ref(0) const interval = setinterval(() => { counter.value++ }, 1000) const reset = () => { counter.value = 0 } const terminate = () => { clearinterval(interval) } return { counter, reset, terminate } }}</script>
从组合的角度来看，我希望父级组件能够在需要时直接调用reset方法--但我希望保持terminate 函数和 counter 的引用只对组件可用。
如果我们把这个组件实例化到一个父类中，例如 app.vue，并给它附加一个 ref 引用，我们可以很容易地让父类调用 reset 方法，因为当我们从 setup 中返回它时，它已经和 terminate 一起被暴露了。
app.vue
<template> <mycounter ref="counter" /> <button @click="reset">reset from parent</button> <button @click="terminate">terminate from parent</button></template><script>import mycounter from '@/components/mycounter.vue'export default { name: 'app', components: { mycounter }, methods: { reset () { this.$refs.counter.reset() }, terminate () { this.$refs.counter.terminate() } }}</script>
如果现在运行这个，并单击重置或终止按钮，两者都可以工作。
让我们明确说明我们要向父类暴露(expose)的内容，以便只有 reset 函数可用。
** mycounter.vue**
<script>import { ref } from 'vue'export default { setup (props, context) { const counter = ref(null) const interval = setinterval(() => { counter.value++ }, 1000) const reset = () => { counter.value = 0 } const terminate = () => { console.log(interval) clearinterval(interval) } context.expose({ reset }) return { counter, reset, terminate } }}</script>
这里，我们在setup函数中加入了 props 和 context 参数。我们需要有可用的上下文，因为这是 expose 函数的位置。我们也可以像这样使用重构: { expose }。
接下来，我们使用 context.expose 来声明一个我们想要向实例化这个组件的父类公开的元素对象；在这个例子中，我们只打算让 reset 功能可用。
如果我们再次运行这个例子，并点击 terminate from parent 按钮，我们会得到一个错误。
uncaught typeerror: this.$refs.counter.terminate is not a function
terminate 功能不再可用，我们的私有api现在也无法访问了。
选项api上面我们在 composition api 使用 exponse，但在options api中也可以使用这个方法。我们可以把它改写成如下。
// mycounter.vueexport default { created () { ... }, data: () => ({ counter: null }), methods: { reset () { ... }, terminate () { ... } }, expose: ['reset']}
注意，我们添加了一个新的选项api属性expose，允许我们传入一个数组，其中字符串'reset'是我们公开的函数的名称。
组合api 渲染功能创建一个强大脸灵活的组件的方法是利用渲染函数的力量。这对vue 3来说并不新鲜，但是随着composition api的建立，我们现在可以灵活地从setup方法中直接返回组合api h 函数。
这就产生了一个问题，因为在我们的setup函数中，整个return语句只是包含组件正在创建的节点的 h 方法。
如果在这个时候我们选择向父类 expose 一些东西，我们就会遇到与我们之前看到的相反的问题。没有任何东西被暴露，因为除了dom元素，没有任何东西被返回。
让我们重写 mycounter.vue 组件来使用这个方法。
<script>// the template has been deletedimport { ref, h } from 'vue'export default { setup (props, context) { const counter = ref(0) const interval = setinterval(() => { counter.value++ }, 1000) const reset = () => { counter.value = 0 } const terminate = () => { clearinterval(interval) } // context.expose({ reset }) return () => h('div', [ h('p', `counter: ${counter.value}`), h('button', { onclick: reset }, 'reset'), h('button', { onclick: terminate }, 'terminate') ]) }}</script>
注意，我们在顶部从vue导入了 h，因为我们需要用它来创建我们的dom元素。
为了说明问题，暂时注释了context.expose方法。
现在的 return 语句复制了我们之前的 <template> 的dom结构，如果我们运行这个例子，我们能够正确点击元素上的重置和终止按钮。
然而，如果我们现在点击 reset from parent按钮，我们会遇到一个错误。
uncaught typeerror: this.$refs.counter.reset is not a function
reset方法不再被暴露，因为它没有被setup函数返回。为了解决这个问题，我们需要取消对context.expose的调用，使其再次可用。
总结新的 expose 方法是非常直观的，而且很容易在我们的组件中实现。它清除了一些非常重要的组成问题，这些问题在过去甚至需要重写一个完整的组件，所以即使它不是你日常使用的api，它也是值得收藏在我们文件夹中吃灰。
英文原文：https://www.vuemastery.com/blog/understanding-vue-3-expose/
【相关视频教程推荐：vuejs入门教程、web前端入门】
以上就是vue3.2中的expose是啥？有什么用？的详细内容。