Vue组件的生命周期

生命周期:一个组件从创建到销毁的过程就是生命周期,生命周期钩子函数的四个阶段:

1.创建;2.挂载;3.更新;4.销毁

1,组件初始化的时候会执行哪些生命周期函数?

beforeCreate created beforeMount mounted

2,哪些生命周期函数会执行多次

beforeUpdate updated

beforeCreate:

当组件实例化的时候,做了一个初始化操作,注意当前生命周期是组件还没有实例化完毕,因此你是访问不到当前组件的data或者methods属性和方法以及其他生命周期函数

场景:初始化的loading

created:创建后

①当created执行完毕后,会将data以及methods身上所有的属性和方法通过遍历添加到vm的实例身上

②created生命周期函数中会将data身上所有的属性都添加上一个getter/setter方法。让data的属性具有响应式的特性

③场景:当前生命周期函数中可以用来进行ajax数据的请求

beforeMount:挂载前

①数据和模板还未进行结合,可以对数据做最后的一次处理

②在这个生命周期函数中是访问不到真实的DOM结构

mounted:挂载后

①数据与模板进行结合生成真实的DOM树

②在这个生命周期函数中我们可以通过this。$refs.属性名称获取到真实的DOM结构并对其进行处理

③一般情况下我们都会在当前生命周期函数中做方法的实例化

beforeUpdate:更新前

①更新的数据和模板还为进行结合,可以对数据做最后的修改

②在当前生命周期函数中也可以获取到真实的DOM结构

updated:更新后

①更新的数据和模板进行相结合,在这个生命周期函数中我们可以获取到更新后的DOM结构,以及对数据的更新做一个监听

beforeDestroy:销毁前

①在当前生命周期函数中依旧是可以访问到DOM结构的

②使用场景:做一些事件监听的解释。

destroyed:销毁后

①在当前生命周期函数中访问不到真实的DOM结构了

②在这个生命周期中会将当前vm与DOM之间的关联全部断开

原文地址:https://www.cnblogs.com/wwwxxjsyy/p/10908341.html