vue生命周期及router按需加载

vue

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

回到顶部