Vue 中 expose 的用法及应用场景
1. 什么是 expose
在 Vue 3 中，expose 是一个用于明确指定组件实例对外暴露属性的 API。通过 expose，我们可以控制哪些属性可以被父组件访问，从而提高组件的封装性和安全性。
2. 为什么需要 expose
在 Vue 3 中，默认情况下，子组件的所有属性和方法都可以被父组件通过 ref 访问。但是，有时候我们并不希望所有属性都被外部访问，而是只暴露特定的接口。这时，expose 就派上了用场。
3. 如何使用 expose
expose 函数接收一个对象作为参数，该对象包含了需要暴露的属性和方法。在子组件的 setup 函数中，我们可以这样使用 expose：
import { ref } from 'vue';
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
const decrement = () => {
count.value--;
};
expose({
count,
increment,
});
return {
decrement,
};
}
在上面的例子中，我们通过 expose 暴露了 count 属性和 increment 方法，而 decrement 方法则没有被暴露。这样，父组件只能访问 count 和 increment，而无法访问 decrement。
4. 应用场景
expose 的应用场景主要有以下几种：
- 封装组件：通过
expose，我们可以隐藏组件内部的实现细节，只暴露必要的接口，从而提高组件的封装性。 - 控制访问权限：通过
expose，我们可以限制父组件对子组件的访问权限，只允许访问特定的属性和方法，从而提高组件的安全性。 - 提高代码可读性：通过
expose，我们可以明确指定组件对外暴露的接口，从而提高代码的可读性。
5. 注意事项
expose只能在 setup 函数中使用。expose的参数必须是一个对象。- 如果没有调用
expose，则默认暴露所有属性和方法。
