vue 生命周期和组件传值

132 阅读3分钟

说一下Vue的生命周期 beforeCreated 此时data还没初始化,watcher还没设置,options里的配置项也没初始化
cteated data初始化完毕,options也初始化完毕,但是dom还没挂载,不能访问dom
beforeMonted html模板编译完毕,但是还没挂载在页面上
monted 此时编译的html已经渲染到了页面上
beforeUpdate 更新前,数据已经更新了,视图还没更新 Update 视图和数据都已更新
beforeDestroy 销毁前,组件实例都能用
destroyd 销毁后,组件所有东西都被销毁了,已经不能访问了

  1. Vue 子组件和父组件执行顺序 加载时 父元素之后befroreMouted开始加载子元素,加载完父元素再mouted完成
    更新时 父元素在BeforeUpdated之后开始更新子元素,加载完父元素再updated完成
    销毁时 父元素在之后BeforeDestroyed开始销毁子元素,加载完父元素再destoryed完成

  2. created和mounted的区别 c 相比于mouted 不能操作dom,因为dom还没挂载到页面上

  3. 一般在哪个生命周期请求异步数据 created到mouted ,因为此时data 已经初始化了,可以对data赋值了
    推荐在created 获取数据,能更快获取到数据,减少页面加载时间

  4. keep-alive 中的生命周期哪些 activated 和enactivated 是组件切入切出

三、vue组件通信 props 通过子组件定义属性,父组件传输
eventbus 通过一个空的vue实例,当初事件中心,进行组件通信(onon 和emit)
provide 和reject 通过组件注入,实现父子或祖孙通信
attrattr 和 listener 通过listener继承父元素事件,attr传给子元素
通过 refs 获取组件实例,进行通信 父子 ,兄弟
通过 parentparent 和chilren 获取父子组件实例进行通信 爷孙
通过vuex 进行全局组件通信

  1. Vue-Router 的懒加载如何实现 通过箭头函数+import

vue 的两种路由模式hash和history hash 模式url包含#号,请求中不会携带,根据hash值进行页面跳转 ,页面跳转时不必刷新页面 ,通过window对象的onhashchange监听hash变化,实现页面前进后退

history不包含#号,更美观,不过页面跳转必须刷新页面,且需要后台配置,否则404

  1. 如何获取页面的hash变化
    通过监听当前路由信息对象 watch $route

  2. routeroute 和router 的区别 route 当前路由信息对象主要包含的是当前路由的信息如path name query params hash fullname router 当前路由实例对象,主要对当前路由进行操作,如路由的跳转方法,路由的钩子函数

  3. 如何定义动态路由?如何获取传过来的动态参数(query和parmas)
    定义动态路由在路由后动态部分加个login/:id
    传递时直接跟着path后 login/123123

  4. Vue-router 路由钩子在生命周期的体现 分为全局路由狗子,组件内路由狗子,单个路由狗子
    路由狗子含三个参数 to 跳转到那个路由 from 来自那个路由 next 执行跳转

  5. Vue-router跳转和location.href有什么区别 router只会进行局部页面刷新,window会重新加载整个页面
    router更快消耗更好,性能更好

  6. params和query的区别 qury 地址栏,且刷新不丢失
    params 不是地址栏,刷新会丢失

  7. Vue-router 导航守卫有哪些 全局 before.router after.route
    单个 before.enter
    组件内 beforerouterenter beforerouterupdate beforerouterleave

  8. 对前端路由的理解
    改变最初一个页面一个url的局面
    前端路由时hash模式通过hash值的变化,监听页面跳转,页面跳转主要是局部组件切换,无需整个页面跳转,大大提高了页面切换的速度,不过首屏加载过慢,不利于seo