vue的进阶组件知识扩展

1. 什么是动态组件,如何使用动态组件，如何切换

在同一个挂载点，可以切换显示不同组件。vue内置的component组件，配合is属性。只要改变is属性的值，变为要显示的组件名即可

2. 组件缓存

vue内置的keep-alive组件把要缓存的组件包起来，这要不会频繁的创建和销毁组件，页面更快呈现。通过组件的activated和deactivated来判断组件的存活状态

3. 组件插槽

当组件内某一部分标签不确定时，可以使用插槽技术。先在组件内使用slot占位，使用组件时传入具体标签。传入的标签会替换掉slot显示。当我们在slot标签内写好默认要显示的内容，如果我们没有给组件传入具体标签或者内容，就会显示默认内容

4. 具名插槽

当我们组件内有多处不确定的标签，用slot占位，给name属性起名字来区分。并且用template配个v-slot:name 分发要替换的标签

5. 作用域插槽

当我们使用插槽时需要用到子组件内变量，此时需要用到作用域插槽。可以让组件更加灵活的使用于不同的场景和项目

6. 自定义指令

当vue内置指令满足不了需求时，可以自己定义使用。

7. vue中slot使用方法以及作用域插槽的用法

使用方式：当组件当做标签进行使用的时候，用slot可以用来接受组件标签包裹的内容，当给solt标签添加name属性的 时候，可以调换响应的位置
(高级用法) 插槽作用域： 当传递的不是单一的标签, 例如需要循环时, 把要循环的标签传入, 组件内使用v-for在slot标签上, 内部可以v-bind:把值传出来, 再外面把值赋予进去, 看示例

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

// current-user组件, user属性和值, 绑定给slotProps上
<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

8. 与Keep-alive有关的生命周期是哪些

在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染
activated钩子：在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用
Activated钩子调用时机：第一次进入缓存路由/组件，在mounted后面，beforeRouteEnter守卫传给 next 的回调函数之前调用，并且给因为组件被缓存了，再次进入缓存路由、组件时，不会触发这些钩子函数，beforeCreate created beforeMount mounted 都不会触发。
deactivated钩子：组件被停用（离开路由）时调用。
deactivated钩子调用时机**：使用keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁)，因为组件没被销毁，被缓存起来了，这个钩子可以看作beforeDestroy的替代，如果你缓存了组件，要在组件销毁的的时候做一些事情，可以放在这个钩子里，组件内的离开当前路由钩子beforeRouteLeave => 路由前置守卫 beforeEach =>全局后置钩子afterEach => deactivated 离开缓存组件 => activated 进入缓存组件(如果你进入的也是缓存路由)

9. 自定义指令的方法有哪些？它有哪些钩子函数？

全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives
钩子函数：bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新)
钩子函数参数：el、binding

10. 组件is的特性如何使用

1）动态组件< component :is=“componentName”>< /component>， componentName可以是在本页面已经注册的局部组件名和全局组件名,也可以是一个组件的选项对象。 当控制componentName改变时就可以动态切换选择组件。
​2) 有些HTML元素，诸如 < ul >、< ol >、< table >和< select >，对于哪些元素可以出现在其内部是有严格限制的。 而有些HTML元素，诸如 < li >、< tr > 和 < option >，只能出现在其它某些特定的元素内部。