Vue 常用的生命周期钩子(8个)

简介: Vue 常用的生命周期钩子(8个)

Vue 常用的生命周期钩子(8个)

包含vue官网给出的9个钩子,还有router附带的2生命周期钩子,还有1个就是$nextTick。

官网示例

image.png

image.png

image.png

Vue生命周期钩子官网地址

https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90


export default {
        name: "demoLayout",
        created() {
            //创建时
        },
        beforeCreate() {
            //    创建完成时
        },
        mounted() {
            //   @TODO 挂载时 常用 如:
            this.$nextTick(() => {
                //  dom渲染后,自动执行方法  如:使input输入框自动获取焦点
            })
        },
        activated() {
            //组件可见时 @TODO 只用使用router组件才有的生命周期
        },
        deactivated() {
            //组件隐藏时 @TODO 只用使用router组件才有的生命周期
        },
        beforeDestroy() {
            //    @TODO  快要销毁时 常用
        },
        destroyed() {
            //    销毁
        },
    }
目录
相关文章
|
1天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
9 2
|
1天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【3.项目路由的分析】
vue尚品汇商城项目-day01【3.项目路由的分析】
6 1
|
2天前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
16 1
|
1天前
|
JavaScript 前端开发 数据安全/隐私保护
vue尚品汇商城项目-day01【5.路由组件的搭建】
vue尚品汇商城项目-day01【5.路由组件的搭建】
5 0
vue尚品汇商城项目-day01【5.路由组件的搭建】
|
2天前
|
JavaScript 索引
vue尚品汇商城项目-day04【25.面包屑处理关键字】
vue尚品汇商城项目-day04【25.面包屑处理关键字】
12 1
|
2天前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day04【28.详情页面Detail】
vue尚品汇商城项目-day04【28.详情页面Detail】
10 1
|
1天前
|
JavaScript
vue尚品汇商城项目-day01【6.Footer组件的显示与隐藏】
vue尚品汇商城项目-day01【6.Footer组件的显示与隐藏】
7 0
|
1天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【7.路由传参】
vue尚品汇商城项目-day01【7.路由传参】
6 0
|
1天前
|
JavaScript API
vue尚品汇商城项目-day02【vue插件-13.nprogress进度条的使用】
vue尚品汇商城项目-day02【vue插件-13.nprogress进度条的使用】
5 0
|
1天前
|
JavaScript
vue尚品汇商城项目-day02【14.vuex状态管理库】
vue尚品汇商城项目-day02【14.vuex状态管理库】
5 0