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 在什么情况下在数据发生改变的时候不会触发视图更新
vue 在什么情况下在数据发生改变的时候不会触发视图更新
10 2
|
1天前
|
存储 缓存 JavaScript
vue中性能优化
vue中性能优化
|
1天前
|
JavaScript
vue常用指令
vue常用指令
|
1天前
|
JavaScript
vue自定义指令
vue自定义指令
|
1天前
|
JavaScript
vue实现递归组件
vue实现递归组件
|
1天前
|
缓存 JavaScript
vue 中 keep-alive 组件的作用
vue 中 keep-alive 组件的作用
6 1
|
1天前
|
缓存 JavaScript UED
vue 中的性能优化
vue 中的性能优化
9 2
|
1天前
|
JavaScript 开发者 UED
Vue入门到关门之第三方框架elementui
ElementUI是一个基于Vue.js的组件库,包含丰富的UI组件如按钮、表格,强调易用性、响应式设计和可自定义主题。适用于快速构建现代化Web应用。官网:[Element.eleme.cn](https://element.eleme.cn/#/zh-CN)。安装使用时,需在项目中导入ElementUI和其样式文件。
|
1天前
|
存储 JavaScript 前端开发
vue全家桶详解
vue全家桶详解
8 1
|
1天前
|
JavaScript 前端开发
vue常见的指令
vue常见的指令
9 2