vue生命周期及router按需加载

Vue生命周期

=> 初始化实例

=> beforeCreated(此步不能调用数据及方法)

=> 实例创建完成(observer数据观测 属性和方法的运算 watch/event事件回调)

=> created

=> 检测页面内的el template并编译渲染

=> beforeMount

=> vm.$el替换el,挂载实例

=> mounted()

=> 检测数据是否发生改变

     发生改变时 => beforeUpdated

                        => 虚拟DOM重新渲染和打补丁

                        => updated

=> vm.$destroy回调

=> beforeDestroy

=> 销毁监听 子组件及事件监听

=> destroyed

 

同时,keep-alive的两个周期

=> activated(被 keep-alive 缓存的组件激活时调用)

=> deactivated(被 keep-alive 缓存的组件停用时调用)

进入页面中即可触发,与created不同

 

生命周期：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

全局路由钩子：beforeEach、afterEach

组件路由钩子：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

指令的周期： bind、inserted、update、componentUpdated、unbind

beforeRouteEnter的next所对应的周期

nextTick所对应的周期

 

Vue按需加载(又称懒加载)

{
  path: \'/index\',
  name: \'index\',
  component: () => import(\'@/index\')
}

　　

router的路径,跳转router.push({ path: `/product/${item.id}` })

{
  path: \'/product/:id\',
  name: \'product\',
  component: () => import(\'@/ProductDetail\')
}