vue生命周期及执行顺序
vue生命周期
·
vue生命周期及执行顺序
1、系统自带生命周期一共有8个
beforeCreate(创建前)
created(创建后)
beforeMount(载入前)
mounted(载入后)
beforeUpdate(更新前)
updated(更新后)
beforeDestroy(销毁前)
destroyed(销毁后)
2、页面组件一旦加载执行生命周期
beforeCreate(创建前)
created(创建后)
beforeMount(载入前)
mounted(载入后)
3、页面组件一旦加载执行生命周期的不同点
beforeCreate ===》没有data没有el
created ===》有data没有el
beforeMount ===》有data没有el
mounted ===》有data有el
4、主要生命周期应用场景
created ===》一般发送请求
mounted ===》操作获取dom的插件
5、如果用到了vue内置的组件keep-alive,会多两个生命周期.
activated
deactivated
keep-alive这个组件的作用就是能够缓存不活动的组件。
组件进行切换的时候,默认会进行销毁,如果有需求,某个组件切换后不进行销毁,而是保存之前的状态,
那么就可以利用keep-alive来实现,或者使用路由中的meta属性控制,meta中的keepAlive为true
进行缓存,否侧不进行缓存。
keep-alive上有两个属性:
a:include 值为字符串或者正则表达式匹配的组件name会被缓存
b:exclude 值为字符串或正则表达式匹配的组件name不会被缓存。
例如:
<keep-alive include="home">
<router-view />
</keep-alive>
使用路由中的meta属性控制
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
存在的问题,因为组件被缓存,并没有被销毁,所以组件在切换的时候也就不会被重新创建,也就不会
调用created等生命周期函数,所以此时要使用activated与deactivated来获取当前组件是否处于活动状态。
6、如果用到了keep-alive组件,生命周期的执行有以下变化
第一次进入组件会执行
beforeCreate(创建前)
created(创建后)
beforeMount(载入前)
mounted(载入后)
activated
第二次、第三次.....进入组件会执行
activated
父子组件生命周期及执行顺序
1、只有父组件时,页面组件一旦加载,生命周期及执行顺序
beforeCreate(创建前)
created(创建后)
beforeMount(载入前)
mounted(载入后)
2、存在父子组件时,页面组件一旦加载,生命周期及执行顺序
父组件:beforeCreate、created、beforeMount
子组件:beforeCreate、created、beforeMount、mounted
父组件:mounted
更多推荐
已为社区贡献2条内容
所有评论(0)