Vue面试题(2.0)

270 阅读3分钟

vue中slot的使用方式,以及slot作用域插槽的用法

/*
使用方式:当组件当作标签进行使用的时候 ,用slot可以用来接收标签包裹的内容
当给slot标签添加name属性的时候,可以调换响应位置
(高级用法)插槽作用域:当传递的不是单一的标签。列如需要循环时
把要循环的标签传入,组件内使用v-for在slot标签上,内部可以-vbind:把值传过来.再外面把值赋予进去
*/
<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>

跟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>