others linux服务器运维 django3 监控 k8s golang 数据库 大数据 前端 devops 理论基础 java oracle 运维日志

vue3 生命周期函数

访问量:1240 创建时间:2021-04-06

生命周期函数与data,method,components 平级。

beforeCreate(){
    console.log("实例刚刚被创建")
},
created(){
    console.log("实例完成创建")
},
beforeMount(){
    console.log("模板编译之前")
},
mounted(){
    console.log("模板编译完成")
},
beforeUpdate(){
    console.log("数据更新之前")
},
updated(){
    console.log("数据更新完成")
},
activated(){
    console.log("keep-alived缓存组件激活时调用")
},
deactivated(){
    console.log("keep-alived缓存组件停用时调用")
},
// 通过v-if 销毁实例
beforeUnmount(){
    console.log("实例销毁之间")
},
unmounted(){
    console.log("实例销毁完成")
}

tab切换,选项卡,幻灯片、多页面之间路由 需要缓存使用<组件> 来实现组件内容的缓存,当组件销毁v-if,再次被创建时,内部数据使用销毁之前的数据。有了keep-alive模板标签,会调用缓存方法(调用activated与deactivated 就不在调用销毁方法)。

登陆评论: 使用GITHUB登陆