Vue3的options Api

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

一、状态选项：

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

二、生命周期选项：

1. errorCaptured：捕捉子组件的错误。

2. activated：如果组件实例是KeepAlive缓存树的一部分，当组件被插入到DOM中时调用。

3. deactivated：如果组件实例是KeepAlive缓存树的一部分，当组件从DOM中移除时调用。

4. renderTracked：在一个响应式依赖被组件的渲染作用追踪后调用。

5. renderTriggered：在一个响应式依赖被组件触发了重新渲染之后调用。

三、组合选项：

1. provide/inject：无论组件嵌套有多深都可以传值。

2. minix：以一种灵活的方式实现vue组件的可复用功能（抽离公共部分的功能），它可以包含任何选项。

它跟store的区别：

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

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

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

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

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

四、组件实例：

1. $data：data函数返回的对象。

2. $props：组件接受的对象。

3. $el：该组件实例管理的DOM根节点。

4. $options：当前组件的详细信息，包括mixin和extends的基组件。

5. $parent：父组件信息。

6. $root：当前组件树的根组件实例。如果当前实例没有父组件，那么这个值就是它自己。

7. $slot：

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

• 标签是vue3的内置标签。

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

• v-slot的简写#。

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

1.  $refs：一个包含 DOM 元素和组件实例的对象，通过模板引用注册。
2. $attrs：一个包含了组件所有透传 attributes 的对象。可以拿到父组件上的属性。

3. $watch：创建一个监听。

4. $emit：在当前组件触发一个自定义事件。任何额外的参数都会传递给事件监听器的回调函数。

5. $forceUpdate：有时候我们可能会手动创建一些数据，这些数据并没有经过 Vue 的响应式化处理，也就是说 Vue 并未监听其变动。此时，如果视图要渲染这个数据，就不能保证其已经响应式地重新渲染了，这时候就可以使用 $forceUpdate 强制刷新页面。

6. $nextTick：页面渲染完触发。

五、其他杂项：

1. name：

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

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

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

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

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

1. inheritAttrs：是否继承属性默认为true。

2. component：注册组件。

3. directives：自定义指令。