02 Vue生命周期

Vue生命周期：

如JQuery

$(document).ready(function () {
    // DOM加载完成后，执行这里的代码
})

 

Vue也会有生命周期钩子：

beforeCreate() {
    // 实例初始化之后调用
    // $el/event/watcher/data 均为undefined
    // 做loading的事情
},
created() {
    // Vue实例已经创建
    // event/watcher/data初始化完成、vm.$el 还不可见
    // loaded完成，可以做数据准备
},
beforeMount() {
    // $el和data都初始化了
    // 但任然是虚拟DOM、数据绑定都还未渲染到实际DOM
    // 该钩子在服务器端渲染不会被调用
},
mounted() {
    // 开始渲染实际DOM
    // el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子
    // 该钩子在服务器端渲染不会被调用
},
beforeUpdate() {
    // 渲染虚拟DOM之前调用
    // 可以进一步修改数据或状态，不会重现触发渲染
    // 该钩子在服务器端渲染不会被调用
},
updated() {
    // 虚拟DOM渲染之后
    // 在此处修改数据或状态，会无限循环渲染
    // 该钩子在服务器端渲染不会被调用
},
beforeDestroy() {
    // Vue实例销毁前，在这里实例任然可用
    // 该钩子在服务器端渲染不会被调用
},
destroyed() {
    // Vue实例销毁后调用
    // 监听移除、子实例消失
    // 该钩子在服务器端渲染不会被调用
}

 

常用：

created：常用于初始化数据

mounted：第一个业务逻辑在这里开始

beforDestroy：在组件销毁前，对使用的addEventListener监听的事件解绑

父子组件生命钩子函数执行顺序：

• 加载渲染过程

　　父组件beforeCreate -> 父组件created -> 父组件beforeMount -> 

　　子组件beforeCreate -> 子组件created -> 子组件beforeMount ->

　　子组件mounted -> 父组件mounted

• 更新过程

　　父组件beforeUpdate -> 子组件beforeUpdate -> 子组件updated -> 父组件updated

• 销毁过程

　　父组件beforeDestroy -> 子组件beforeDestroy -> 子组件destroyed -> 父组件destroyed