什么是生命周期
- 也叫生命周期钩子函数
- 在相对应的阶段做相对应的事情
Vue生命周期
- beforeCreate:创建前
- (1) Vue初始化的时候执行
- (2) data和methods都还没有将自身的属性和方法代理到Vue的实例身上,在当前生命周期中是访问不到data中的属性和methods中的方法。
- (3) 当前生命周期函数在执行的时候组件还为进行创建，因此我们可以在当前组件中进行loading的显示。
- created:创建后(重)
- (1) 组件创建后执行,可以在当前生命周期中进行前后端数据的交互
- (2) 会将data身上所有的属性进行数据劫持，给每一个属性添加getter方法和setter方法。
- (3) 会将data身上所有的属性和methods身上所有的方法代理添加到Vue的实例身上。
- beforeMount:挂载前
- (1) 组件挂载到页面之前会执行
- (2) 可以在当前生命周期函数中对数据进行最后的更改
- (3) 当前生命周期数据和模板还未进行结合，因此是访问不到真实的DOM结构
- mounted:挂载后(重)
- (1) 在组件被挂在到页面的时候会执行
- (2) 可以访问到真实的DOM结构
- (3) 数据和模板以及进行了相结合，我们可以通过this.$refs来访问到真实的DOM结构
- 场景:
- 在当前的生命周期函数中进行方法的实例化(Swiper BScroll echarts)
- ref笔记：
- 给需要获取真实DOM结构的元素添加ref属性 例如 名字必须是唯一
- 通过this.$refs.名字进行访问真实的DOM结构
- beforeUpdate:更新前(重)
- (1) 可以访问到真实的DOM结构
- (2) 可以对更新的数据做最后的更改
- (3) 更新的数据还未和模板进行相结合,同时也可以进行更新数据的检测
- updated:更新后(重)
- (1)数据和模板以及进行相结合,可以获取到数据更新后最新的DOM结构
- (2)进行实例化操作的时候一定要进边界条件的判断，否则会造成无用的性能消耗
- beforeDestroy:销毁前(重)
- (1)会在组件被销毁的时候去执行,可以进行事件的解绑，定时器的清除。
- (2)可以访问到真实的DOM结构。
- destroyed：销毁后
- (1)访问不到真实的DOM结构
- (2)当前生命周期会断开与VUE的关联(那面镜子没有)
