6. Vue组件的生命周期&生命周期函数

目录

一、什么是生命周期和生命周期函数

二、组件的创建阶段

1. beforeCreate

2. created

3. beforeMount

4. mounted

三、组件的运行阶段

1. beforeUpdate

2. updated

四、组件的销毁阶段

1. beforeDestroy

2.destroyed

---

一、什么是生命周期和生命周期函数

生命周期：指的是组件从创建-运行-销毁的全过程，强调的是一个时间段

生命周期函数：指的是Vue框架提供的内置对象，会伴随组件的生命周期，按照次序依次执行

 组件生命周期的三个阶段

---

二、组件的创建阶段

1. beforeCreate

组件创建阶段的第一个生命周期函数，这个阶段组件的props、methods、data等都未被创建，还不能使用

beforeCreate() {}

2. created

组件创建阶段的第二个生命周期函数，组件的props/data/methods已创建好，都处于可用状态。但是组件的模版结构尚未生成

• 这个生命周期函数非常常用，经常调用methods里面的方法，请求服务器的数据

• 并且把请求到的数据，转存到data中，供template 模版渲染的时候使用

created() { }

3. beforeMount

组件创建阶段的第三个生命周期函数，这个阶段是要把内存中编译好的html结构渲染到浏览器中，此时浏览器中还没有当前组件的DOM结构

beforeMount() {}

4. mounted

组件创建阶段的第四个生命周期函数，这个阶段已经把内存中的html结构成功渲染到浏览器中，此时浏览器包含了当前组件DOM结构

• 在这个阶段可以最早操作DOM结构

mounted() {}

---

三、组件的运行阶段

1. beforeUpdate

组件运行时的第1个生命周期函数，这个阶段将要根据变化过后，最新的数据，重新渲染组件的模版结构

beforeUpdate() {}

2. updated

组件运行时的第2个生命周期函数，已经根据最新的数据，完成了组件DOM结构的重新渲染

• 当数据变化之后，为了能够操作到最新的DOM结构，必须把代码写到updated生命周期函数中

updated() {}

---

四、组件的销毁阶段

1. beforeDestroy

组件销毁时的第1个生命周期函数，将要销毁此组件，此时尚未销毁，组件还处于正常工作的状态

beforeDestroy() {} 

2.destroyed

组件销毁的第2个声明周期函数，组件已经被销毁，此组件在浏览器中对应DOM结构已经被完全移除

destroyed() {}

---