Vue3的options Api

过一边Vue3的Api对一些不常用的选项加深印象：

一、状态选项：

expose函数：使用expose函数来控制组件被ref时向外暴露的对象内容，借此来维护组件的封装性，它和ref配合使用。

二、生命周期选项：

errorCaptured：捕捉子组件的错误。
activated：如果组件实例是KeepAlive缓存树的一部分，当组件被插入到DOM中时调用。
deactivated：如果组件实例是KeepAlive缓存树的一部分，当组件从DOM中移除时调用。
renderTracked：在一个响应式依赖被组件的渲染作用追踪后调用。
renderTriggered：在一个响应式依赖被组件触发了重新渲染之后调用。

三、组合选项：

provide/inject：无论组件嵌套有多深都可以传值。
minix：以一种灵活的方式实现vue组件的可复用功能（抽离公共部分的功能），它可以包含任何选项。

它跟store的区别：

store中的数据变化所有组件引入的都会变化。

minix在每个组件使用都是独立的。

在组件中引入后先执行minix的生命周期函数，再执行组件的。

在 Vue 2 中，mixins 是创建可重用组件逻辑的主要方式。尽管在 Vue 3 中保留了 mixins 支持，但对于组件间的逻辑复用，Composition API 是现在更推荐的方式。

3.extends：继承另一个组件。

四、组件实例：

$data：data函数返回的对象。
$props：组件接受的对象。
$el：该组件实例管理的DOM根节点。
$options：当前组件的详细信息，包括mixin和extends的基组件。
$parent：父组件信息。
$root：当前组件树的根组件实例。如果当前实例没有父组件，那么这个值就是它自己。
$slot：

通常用在父子组件，相当于在子组件中挖出一个槽，可以用来填充内容，父组件在调用子组件时，子组件标签之间的内容元素就是要插入的内容会把slot标签替换掉

<slot></slot>标签是vue3的内置标签。

slot提供默认插槽和具名插槽，具名插槽就是给子组件的slot标签起名字，在父组件里以v-slot=“header”的形式调用，也可以指定默认插槽。

v-slot的简写#。

vue3支持插槽也可以访问子组件的数据。

$refs：一个包含 DOM 元素和组件实例的对象，通过模板引用注册。
$attrs：一个包含了组件所有透传 attributes 的对象。可以拿到父组件上的属性。
$watch：创建一个监听。
$emit：在当前组件触发一个自定义事件。任何额外的参数都会传递给事件监听器的回调函数。
$forceUpdate：有时候我们可能会手动创建一些数据，这些数据并没有经过 Vue 的响应式化处理，也就是说 Vue 并未监听其变动。此时，如果视图要渲染这个数据，就不能保证其已经响应式地重新渲染了，这时候就可以使用 $forceUpdate 强制刷新页面。
$nextTick：页面渲染完触发。

五、其他杂项：

name：

报异常、警告可以更好的定位。

递归引用自己时，无需导入自己组件。

当一个组件通过app.component全局注册时,name就设置为组件ID。

不是一个SFC（Single File Component）的组件，没有文件名，必须指定一个name。

在 Vue 3 中，<KeepAlive> 是一个内置的组件，用于缓存动态组件或异步组件。 <KeepAlive> 组件具有 include 和 exclude 两个 prop，它们分别用来指定需要进行缓存的组件和不需要进行缓存的组件。这些组件的匹配是通过比较组件的名称来实现的。当组件被 <KeepAlive> 缓存后，再次渲染时不会重新创建组件实例，而是直接使用之前创建的组件实例。这可以带来更好的性能表现，因为避免了重复创建和销毁组件实例的开销。但是，在这个过程中，<KeepAlive> 需要知道被缓存的组件的名称，才能确定该缓存哪些组件。如果被缓存的组件没有声明 name 属性，则它的名称会被自动分配，而这可能会导致一些问题，例如缓存的组件无法被正确识别，导致缓存失效等等。因此，在使用 <KeepAlive> 组件时，要确保要缓存的组件都显式地声明了 name 属性，以便被 <KeepAlive> 正确地匹配和缓存。