vue.js交互与实例的生命周期

钩子函数

• 在特定的时间点提供给我们执行代码的时机
• 生命周期分为四个阶段：创建、挂载、更新、销毁
  • 创建阶段：
    • beforeCreate 组件刚刚被创建 属性还未计算(比如data属性是没有值的)
    • Created 组件实例已经被创建 属性已经绑定 但是DOM还未生成 也就是$el不存在
  • 挂载阶段
    • beforeMount 挂载之前
    • mounted 挂载之后
  • 更新阶段
    • beforeUpdate 组件更新之前
    • updated 组件更新之后
  • 销毁阶段
    • beforeDestroy 组件销毁之前
    • destroy 组件销毁之后

• 导航钩子函数

  -- 导航发生变化时，导航钩子主要用来拦截导航，让它来完成跳转或取消
  

• 执行导航钩子函数的位置
  • router全局
  • 单个路由
  • 组件中

• 钩子函数

  • router实例上: beforeEach afterEach
  • 单个路由中： beforeEnter

  • 组件内的钩子: beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

    • 单个组件内的钩子函数怎么访问data数据,在钩子函数内传入回调函数，函数内传入vm参数，通过vm.data访问
      ```
      在单个组件内

      let flags = {
      project: ‘我的项目’,
      workbench: ‘工作台’,
      doc: ‘文档’
      },

      export dafault{
      data(){

      flag: ''
      

      }
      },
      beforeRouteEnter(to,from,next){
      next((vm) => {

      vm.flag = flags[to.path.slice(1)]
      

      })
      }

• 钩子函数内的接收参数

  • to: 要进入的目标路由对象 到哪里去
  • from：正要离开的导航路由对象 从哪里来
  • next：用来决定跳转或者取消导航