什么是生命周期?

一个Vue实例从创建到销毁的整个过程

分为四个阶段 创建 挂载 更新 销毁

创建阶段–响应式处理数据 发送初始化渲染请求

挂载阶段–渲染模版 操作dom

更新阶段–数据修改 更改视图(循环)

销毁阶段–销毁实例

Vue生命周期过程中 会自动运行一些函数 被称为[生命周期钩子] 让开发者可以在特定阶段运行自己的代码

生命周期中的8个函数

1.创建阶段

beforeCreate(){}

created(){//可以开始发送初始化渲染的请求了} 此时响应式数据已经准备好

2.挂载阶段

beforeMount(){}

mounted(){//可以开始操作dom} 此时模版已经被渲染

3.更新阶段

beforeUpdate(){}

updated(){}

4.卸载阶段

beforeDestroy(){}

destroyed(){}

这8个钩子函数中最重要的只有两个函数 created() 和 mounted() 分别是发送初识化渲染请求 和操作DOM的最早时机 接下来详细介绍一下这两个函数的使用案例

created()应用–新闻列表

如图 从接口获取数据进行渲染

在created()函数中 响应式数据已经准备好 就可以发送请求获取数据来初始化渲染了

mounted()应用–获取焦点

等输入框渲染出来之后才能让输入框获取焦点