0
点赞
收藏
分享

微信扫一扫

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

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

 官网示例

 

钩子名称created()beforeCreate()mounted()activated()deactivated()beforeDestroy()destroyed() $nextTick
解释在实例创建完成后被立即同步调用在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用实例被挂载后调用,这时 el 被新创建的 vm.$el 替换了被 keep-alive 缓存的组件激活时调用被 keep-alive 缓存的组件失活时调用实例销毁之前调用实例销毁后调用仅在整个视图都被渲染之后才会运行的代码
使用场景数据侦听、计算属性、方法、事件/侦听器的回调函数监听绑定赋值定时器开始定时器停止监听解绑

使input输入框自动获取焦点

Vue生命周期钩子官网地址icon-default.png?t=M276https://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() {
            //    销毁

        },
        
    }

 

举报

相关推荐

0 条评论