Vue3.2中新的Expose是做什么用的？_0

随着Vue3.2的发布，我们可以使用一个新的组合工具，称为expose。您是否曾经创建过需要向模板提供一些方法和属性的组件，但希望这些方法对组件私有并且不能被父类调用？如果您正在开发开源组件或库，您可能希望将一些内部方法保密。在Vue3.2之前，这并不容易实现，因为在选项API中声明的所有方法或数据等都是公开的，因此模板可以访问它。组合API也是如此。我们从setup方法返回的所有东西都可以被父类直接访问。CompositionAPI让我们看一个实际的例子。想象一下，我们有一个组件创建一个计数器并每秒更新这个计数器。**MyCounter.vue**从组合的角度来看，我想要父组件能够在需要时直接调用重置方法-但我想保留对终止函数和计数器的引用仅对组件可用。如果我们把这个组件实例化到一个父类中，比如App.vue，并给它附加一个ref，我们就可以很容易的让父类调用reset方法，因为当我们从setup返回的时候，它已经和terminate一起暴露了.App.vue如果你现在运行它，然后点击重置或终止按钮，两者都有效。让我们明确说明我们想要向父类公开什么，以便只有重置功能可用。**MyCounter.vue**在这里，我们向设置函数添加了props和上下文参数。我们需要有可用的上下文，因为这是expose函数所在的地方。我们也可以像这样使用重构：{expose}。接下来，我们使用context.expose来声明一个我们想要暴露给实例化该组件的父类的元素对象；在本例中，我们只打算使重置功能可用。如果我们再次运行该示例并单击“Terminatefromparent”按钮，则会出现错误。UncaughtTypeError:this.$refs.counter.terminateisnotafunction终止函数不再可用，我们的私有API现在不可访问。OptionsAPI上面我们在compositionAPI中使用了exponse，但是这个方法也可以用在optionsAPI中。我们可以重写如下。//MyCounter.vueexportdefault{created(){...},data:()=>({counter:null}),methods:{reset(){...},terminate(){...}},expose:['reset']}请注意，我们添加了一个新的选项API属性expose，允许我们传入一个数组，其中字符串'reset'是我们公开的函数的名称。CompositionAPI渲染函数创建强大而灵活的组件的方法是利用渲染函数的力量。这对Vue3来说并不新鲜，但是通过内置的组合API，我们现在可以灵活地直接从设置方法返回组合APIh函数。这会产生一个问题，因为在我们的设置函数中，整个返回语句只是包含组件正在创建的节点的h方法。如果此时我们选择向父类公开一些东西，我们就会遇到与我们之前看到的相反的问题。没有任何内容被暴露，因为除了DOM元素之外没有返回任何内容。让我们覆盖MyCounter.vue组件以使用此方法。请注意，我们在顶部从Vue导入h，因为我们需要它来创建我们的DOM元素。为了说明问题，临时注释了context.expose方法。return语句现在复制了我们之前的