Vue的生命周期钩子函数和初始化页面在哪发送请求数据合适

Vue的生命周期

vue生命周期

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

生命周期钩子函数

vue提前定义在组件生命周期各个阶段上，一旦发生到这个阶段，就会自动调用的函数。

包括: 4个阶段和8个钩子函数:

创建组件对象前自动执行: beforeCreate()[这时没有$el，没有$data]

1 创建阶段:

创建组件对象后自动执行: created() [这时没有$el，有$data]

将新HTML内容挂载到页面上之前: beforeMount() [这时没有$el，有$data]

2 挂载阶段:

将新HTML内容挂载到页面上之后: mounted() [这时有$el，有$data]

当修改data中的变量之前自动触发: beforeUpdate()

3 更新阶段:

当修改data中的变量之后自动执行: updated()

当销毁当前组件之前自动触发: beforeDestroy()

4 销毁阶段:

当销毁当前组件后自动触发: destroyed()

5 如果加入了keep-alive

就会多两个生命周期

activated（进入）

deactivated（离开）

keep-alive是什么

vue系统自动的一个组件，功能：来缓存组件（提升性能）

keep-alive使用场景

来缓存主键来提升项目性能。具体实现：首页进入到详情页，如果用户每次点击都是相同的详情页，那么

详情页就没必要请求多次，直接缓存起来即可，如果点击的不是同一个那么久直接请求。

何时发送请求页面初始化数据:

1. 因为请求回来的数据要放在data对象内，所以，最早只能在created()中发送请求。因为此时已经有组件对象和data对象了。axios请求回来的数据，就可以放入data对象中。

2. 最保险的但是稍微有点儿晚的做法: 在mounted()阶段，也就是整个虚拟DOM树都加载完再发送axios请求。