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\')
}
以上是 vue生命周期及router按需加载 的全部内容, 来源链接: utcz.com/z/377060.html