vue中slot的使用方式,以及slot作用域插槽的用法
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</current-user>
<span>
<slot v-bind:user="user">
{{ user.lastName }}
</slot>
</span>
跟keep-alive有关的生命周期是哪些
1.在开发Vue项目的时候,大部分组件是没必要多次渲染的,所以Vue提供了一个内置组件keep-alive来缓存组件内部状态,避免重新渲
2.生命周期函数:
在被keep-alive包含的组件/路由中,会多出两个生命周期的钩子:avtivaed与deactivaed
01.activaed钩子函数:在组件第一次渲染时会被调用,之后在每次缓存自建被激活时调用
02.activaed调用时机,第一次今日缓存路由/组件,在mounted后面beforRouteEnter守卫传给next的回调函数之前调用
并且给因为组件被缓存了,在此今日缓存路由,组件时。不会触发这些钩子函数
beforeCreate created beforeMount mounted 都不会触发
3)deactivaed钩子函数:组件被停用(离开路由)时调用
deactivated钩子函数调用时机:使用keep-alive就不会调用beforDstroy(组件销毁前钩子)和destroyed(组件销毁)
因为组件没被销毁,被缓存起来了,这个钩子可以看作beforDestroy的替代,如果缓存了组件,要在组件销毁的时候做一些事情,可以放在这个钩子里,组件内的离开当前路由钩子beforeRouteLeave=>路由前置守卫beforEach=>全局后置钩子afterEach=>deactivated离开缓存组件=>activated今日缓存组件(如果你进入的也是缓存路由)
自定义指令(v-check,v-focus)的方法有哪些,他又哪些钩子函数,还有哪些钩子函数参数
全局定义指令:在vue对象的directive方法里面有两个参数,一个是指令名称,另一个时函数
组件内定义指令:directives
钩子函数:bind(绑定事件触发),inserted(节点插入的时候触发),updata(组件内相关更新)
钩子函数参数:el,binding
is这个特性你有用过吗,主要用在哪些方面
1.动态组件
<component :is='componentName'></component>
componentName可以是在本页面已经注册的局部组件名和全局注册名,也可以是一个组件的选项对象
当控制componentName改变时就可以动态切换选择组件
2.is的用法
有些html元素,如<ul> ,<ol>,<table>和<select>,对于哪些元素可以出现在其内部是有严格限制的
而有些html元素,如<li>,<tr>和<option>,只能出现在其他某些特定的元素内部
<ul>
<card-list></card-list>
</ul>
上面的<card-list></card-list>会被作为无效的内容提升到外部,并导致最终渲染结果出错
<ul>
<li is='cardList'></li>
</ul>