vue
1、说一下你对vue生命周期的理解
组件从创建到销毁的过程就是它的生命周期
beforeCreat :在这个阶段属性和方法都不能使用
created :这里是实例创建完成之后,在这里完成了数据监测,可以使用数据,修改数据,不会触发updated,也不会更新视图
beforeMount :完成了模板的编译,虚拟DOM也完成创建,即将渲染,修改数据,不会触发updated
Mounted :把编译好的模板挂载到页面,这里可以发送异步请求也可以访问DOM节点
beforeUpdate :组件数据更新之前使用,数据是新的,页面上的数据时旧的,组件即将更新,准备渲染,可以改数据
updated :render重新做了渲染,这时数据和页面都是新的,避免在此更新数据
beforeDestroy :实例销毁前,在这里实例还可以用,可以清楚定时器等等
destroyed:组件已经被销毁了,全部都销毁
使用了keep-alive 时多出两个周期:
activited :组件激活时
deactivited:组件被销毁时
2、在created和mounted去请求数据,有什么区别?
created :在渲染前调用,通常先初始化属性,然后做渲染
mounted :在模板渲染完成后,一般都是初始化页面后,在对元素节点进行操作,在这里请求数据可能会出现闪屏的问题,created里不会
请求的数据对DOM有影响,那么使用created,如果请求的数据对DOM无关,可以放在mounted
3、vue中的修饰符有哪些?
- 事件修饰符
.stop 组织冒泡
.prevent 组织默认行为
.capture 内部元素触发的事件先在次处理
.self 只有在event.target是当前元素时触发
.once 事件只会触发一次
.passive 立即触发默认行为
.native 把当前元素作为原生标签看待 - 按键修饰符
.keyup 键盘抬起
.keydown 键盘按下 - 系统修饰符
.ctrl
.alt
.meta - 鼠标修饰符
.left 鼠标左键
.right 鼠标右键
.middle 鼠标中键 - 表单修饰符
.lazy 等输入完之后再显示
.trim 删除内容前后的空格
.number 输入是数字或转为数字
4、vue如何进行组件通信
1.父传子
props
父组件使用自定义属性,然后子组件使用props
r e f 引用信息会注册在父组件的 ref 引用信息会注册在父组件的 ref引用信息会注册在父组件的refs对象上
2.子传父
$emit
子组件绑定自定义事件,触发执行后,传给父组件,父组件需要用事件监听来接收参数
3.兄弟传
new一个新的vue实例,用on和emit来对数据进行传输
4.vuex传值
5、keep-alive是什么?怎么使用?
Vue的一个内置组件,包裹组件的时候,会缓存不活跃的组件实例,并不是销毁他们
作用:把组件切换的状态保存在内存里,防止重复渲染DOM节点,减少加载时间和性能消耗,提高用户体验
6、axios是怎么做封装的?
下载 创建实例 接着封装请求响应拦截器 抛出 最后封装接口
7、vue路由时怎么传参的?
params传参
this. r o u t e r . p u s h ( n a m e : ′ i n d e x ′ , p a r a m s : i d : i t e m . i d ) t h i s . router.push({name:'index',params:{id:item.id}}) this. router.push(name:′index′,params:id:item.id)this.route.params.id
路由属性传参
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: ...({name:'/index/{item.id}'})
路由配置 { path:'/index:id' }
query传参(可以解决页面刷新参数丢失的问题)
this.$router.push({
name:'index',
query:{id:item.id}
})