天天看点

vue生命周期

构建期

第一阶段(beforeCreate之前),此阶段事件(once,native,stop, capture等事件)但数据代理还未开始,此时在beforeCreate不能访问data数据跟methods中的方法

第二阶段(beforeCreate至created)始化数据监测(definedProperty)跟数据代理(数据代理到vue实例下可以通过this访问数据),此时created初始化完成可以访问数据跟methods中的方法

第三阶段(created至beforeMount)解析模板,内存中生成虚拟dom,页面显示未编译的模板,操作dom后不奏效(原因:mounted声明周期会替换模板,会把更改的dom覆盖掉)

第四阶段(beforeMount至mounted)此阶段调用render方法将虚拟dom替换未真正的dom,此时页面渲染完成,可在mounted里面调用dom(不建议多的操作dom)

更新期 数据更新时候触发

beforeUpdate 当页面数据发生变化时候执行,此时页面数据更新,而dom还未更新,会导致页面跟数据不同步

beforeUpdate至updated此时根据新数据生成新的虚拟dom,diif算法等,完成页面更新 此时updated里数据跟页面同步

销毁期 非keep-alive时候页面销毁触发

beforeDestory 此时可以更新数据,调用方法但是页面不更新 此声明周期可以注销一些事件 解除定时器,接触自定义事件等

destoryed 页面销毁完成

使用keep-alive期间

activated 页面第一次加载会执行构建期间跟此生命周期 下次进来不会执行构建起所以使用keep-alive请求一般放到此声明周期

deactivated  页面离开执行此声明周期

vue生命周期