最新消息:文章中包含代码时,请遵守代码高亮规范!

Vue生命周期一些方法

原创文章 user 174浏览 0评论

关于Vue的一些生命周期的方法使用,可以更方便我们快捷开发

export default {
    beforeCreate:function(){
    
    }
}

beforeCreate:在创建vue实例前调用,vue实例中的el,data,data中的message都为undefined时,可以在这加个load事件

export default {
    created:function(){
    
    }
}

created:在创建vue实例后调用,渲染HTML前调用,此时的el还是undefined,而数据已经与data中的属性进行绑定,在这里可以在渲染前倒数第二次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取

export default {
    beforeMoun:function(){
    
    }
}

beforeMoun:载入前(完成了data和el数据初始化),但是页面中的内容还是vue中的占位符,data中的message信息没有被挂在到Bom节点中,在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取

export default {
    mounted:function(){
    
    }:
}

mounted:HTML渲染完成后调用,vue实例中的data里的message挂载到BOM节点中去

export default {
    beforeUpdate:function(){
    
    }
}

berforeUpdate:View层数据变化前,重新渲染之前触发

export default {
    updated:function(){
    
    }
}

updated:数据更新完成,dom也重新render完成后触发

export default {
    beforeDestory:function(){
    
    }
}

beforeDestory:销毁前执行,一般在这里处理清除计时器,清除非指令绑定的时间

export default {
    destroyed:function(){
    
    }
}

destroyed:销毁后执行,Dom元素存在,不受vue控制,卸载watcher,事件监听,子组件

生命周期.png

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/25257.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Miya的打赏,我们会更加努力!    如果您想成为作者,请点我

发表我的评论
取消评论

表情