说一下Vue的生命周期
beforeCreated 此时data还没初始化,watcher还没设置,options里的配置项也没初始化
cteated data初始化完毕,options也初始化完毕,但是dom还没挂载,不能访问dom
beforeMonted html模板编译完毕,但是还没挂载在页面上
monted 此时编译的html已经渲染到了页面上
beforeUpdate 更新前,数据已经更新了,视图还没更新
Update 视图和数据都已更新
beforeDestroy 销毁前,组件实例都能用
destroyd 销毁后,组件所有东西都被销毁了,已经不能访问了
-
Vue 子组件和父组件执行顺序 加载时 父元素之后befroreMouted开始加载子元素,加载完父元素再mouted完成
更新时 父元素在BeforeUpdated之后开始更新子元素,加载完父元素再updated完成
销毁时 父元素在之后BeforeDestroyed开始销毁子元素,加载完父元素再destoryed完成 -
created和mounted的区别 c 相比于mouted 不能操作dom,因为dom还没挂载到页面上
-
一般在哪个生命周期请求异步数据 created到mouted ,因为此时data 已经初始化了,可以对data赋值了
推荐在created 获取数据,能更快获取到数据,减少页面加载时间 -
keep-alive 中的生命周期哪些 activated 和enactivated 是组件切入切出
三、vue组件通信
props 通过子组件定义属性,父组件传输
eventbus 通过一个空的vue实例,当初事件中心,进行组件通信(emit)
provide 和reject 通过组件注入,实现父子或祖孙通信
listener 通过listener继承父元素事件,attr传给子元素
通过 refs 获取组件实例,进行通信 父子 ,兄弟
通过 chilren 获取父子组件实例进行通信 爷孙
通过vuex 进行全局组件通信
-
Vue-Router 的懒加载如何实现 通过箭头函数+import
vue 的两种路由模式hash和history hash 模式url包含#号,请求中不会携带,根据hash值进行页面跳转 ,页面跳转时不必刷新页面 ,通过window对象的onhashchange监听hash变化,实现页面前进后退
history不包含#号,更美观,不过页面跳转必须刷新页面,且需要后台配置,否则404
-
如何获取页面的hash变化
通过监听当前路由信息对象 watch $route -
router 的区别 route 当前路由信息对象主要包含的是当前路由的信息如path name query params hash fullname router 当前路由实例对象,主要对当前路由进行操作,如路由的跳转方法,路由的钩子函数
-
如何定义动态路由?如何获取传过来的动态参数(query和parmas)
定义动态路由在路由后动态部分加个login/:id
传递时直接跟着path后 login/123123 -
Vue-router 路由钩子在生命周期的体现 分为全局路由狗子,组件内路由狗子,单个路由狗子
路由狗子含三个参数 to 跳转到那个路由 from 来自那个路由 next 执行跳转 -
Vue-router跳转和location.href有什么区别 router只会进行局部页面刷新,window会重新加载整个页面
router更快消耗更好,性能更好 -
params和query的区别 qury 地址栏,且刷新不丢失
params 不是地址栏,刷新会丢失 -
Vue-router 导航守卫有哪些 全局 before.router after.route
单个 before.enter
组件内 beforerouterenter beforerouterupdate beforerouterleave -
对前端路由的理解
改变最初一个页面一个url的局面
前端路由时hash模式通过hash值的变化,监听页面跳转,页面跳转主要是局部组件切换,无需整个页面跳转,大大提高了页面切换的速度,不过首屏加载过慢,不利于seo