vue生命周期简单总结

  生命周期(钩子函数):一个组件从创建到销毁的过程就是生命周期
 
 
beforeCreate: 创建前
    1、当前vue实例化的时候会做一个初始化的操作,在这个生命周期函数中我们可以做初始化的loading
    2、在当前函数里面访问不到data中的属性,但可以通过vue实例对象(vm)访问
created:创建后
    1、当beforeCreate执行完毕后,会执行created,在当前函数中我们可以访问到data中的属性。
    2、当前生命周期函数执行的时候,会将data中所有的属性和methods身上所有的方法,都添加到vue实例身上,
            同时会将data中的所有的属性添加一个getter/setter方法
    3、如果需要进行前后端交互(ajax请求),需要在当前生命周期(created)中执行。
beforeMount: 挂载前
     render函数(渲染) 
    render函数初次被调用---------数据和模板没有进行相结合,同时还没有渲染到HTML页面上  
    渲染前data数据中最后的修改
mountd:挂载后
    1、数据和模板相互结合,渲染成真实的DOM结构
    2、在当前生命周期里面我们可以访问真实的DOM结构
    3、在vue中我们可以通过$refs来访问真实的DOM结构
    4、ref类似于id一样,在当前作用域中值必须是唯一的。访问时通过this.$refs.属性
beforeUpdate:更新前 
    只要data中的属性发生了改变,那么这个生命周期函数就会执行,render函数就会再次执行
    在这个函数中我们可以对数据进行最后的修改,同时也可以访问到最新的DOM结构和数据,一般不再这里访问,而是在updated访问
updated:更新后
    在当前生命周期函数中我们可以访问到最新的DOM结构(数据更新后最新的DOM结构)和数据
beforeDestroy:销毁前
    销毁之前还可以访问DOM结构,以及相关的数据(data)
    在这个生命周期函数中我们可以将绑定的事件进行移除
destroyd:销毁后
    在这个生命周期函数中,会将数据和模板之间的关系断开(自动的,不需要做)
    我们还是可以访问data中的属性,但是不能访问真实的DOM结构了
 
原文地址:https://www.cnblogs.com/xixinhua/p/10416259.html