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

目录

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

二、组件的创建阶段

1. beforeCreate

2. created

3. beforeMount

4. mounted

三、组件的运行阶段

1. beforeUpdate

2. updated

四、组件的销毁阶段

1. beforeDestroy

2.destroyed


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

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

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

6. Vue组件的生命周期&生命周期函数_第1张图片 组件生命周期的三个阶段


二、组件的创建阶段

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() {}


6. Vue组件的生命周期&生命周期函数_第2张图片

 

你可能感兴趣的:(Vue,vue.js,javascript,前端)