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结构了
在技术路上探索的菜鸟,如有不足,欢迎大佬们指正!