0
点赞
收藏
分享

微信扫一扫

vue的生命周期钩子

愚鱼看书说故事 2022-02-20 阅读 53

1. vue生命周期钩子
    vue实例从加载到销毁过程中会执行的一些回调函数
    生命周期 : vue实例从创建到销毁的过程。 (vue实例创建, dom树完成渲染)
    钩子 : 回调函数

2. vue生命周期4个阶段8个勾子
     阶段一: 创建  (创建vue实例)
                    beforeCreate, created
     阶段二: 挂载   (data数据渲染到el)
                    beforeMount,mounted
     阶段三: 更新    (检测data变化并更新el)
                    beforeUpdate,updated
     阶段四: 销毁   (解除data与el的绑定关系)
                    beforeDestroy,destroyed

钩子执行顺序
    1. beforeCreate : 创建vue实例之前
        data中的数据还没有创建
    2.created : vue实例创建完成
        完成data的创建,但是还没有创建挂载点 可以访问 data / methods / computed 等  不能访问真实DOM
    3.beforeMount : data数据挂载到el之前
        完成el的创建,但是没有挂载
    4.mounted : 完成挂载
        完成初始渲染(第一次把data渲染到el)可以访问真实DOM了
    5.beforeUpdate : 数据更新前
        检测数据变化了,但是页面还没有更新
    6.updated : 完成数据更新
        把修改后的data重新渲染到了页面 数据和真实DOM都更新了
    7.beforeDestroy : vue实例销毁前
        销毁前: 不是指vue实例销毁,而是解除data和el的绑定关系 
    8.已经销毁

3. vue第一次加载的时候会执行哪几个钩子
    3.1 创建vue实例之前 : beforeCreate
    3.2 创建vue实例之后 : created
    3.3 挂载前 : beforeMount
    3.4 挂载后(初始渲染) : mounted

4. vue常用钩子
    created : 完成data数据创建  (一般用于axios请求网络数据)
    mounted : 完成初始渲染 (一般用于操作dom)

5.注意点
    vue生命周期钩子 不能使用 箭头函数
    function函数: 钩子中的this指向 vue实例
    箭头函数: 钩子中的this指向 window
 

刚学vue的小菜鸟,不对的地方欢迎大家纠正和补充(*^▽^*)

举报

相关推荐

0 条评论