Vue的生命周期

一、阶段

1.挂载阶段

（1）beforeCreate无法拿到打印信息
（2）created 可以拿到data，已经为Vue实例开辟了内存空间
（3）beforeMount 无法拿到el
（4）mounted 虚拟dom已经挂载在了真实的元素上，可以拿到el

2.更新阶段（改变页面元素时）

（1）beforeUpdate
（2）updated

3.销毁阶段

在这个阶段仍然可以打印出语句，是我们离开这个组件才会被调用的生命周期

（1）beforeDestroy
（2）Destroyed

二、在不同的生命周期阶段我们可以做什么

1.created

在Vue实例创建完毕状态，我们可以去访问data、computed、watch、methods上的方法和数据，但现在还没有将虚拟Dom挂载到真实Dom上，所以我们在此时访问不到我们的Dom元素（el属性，ref属性此时都为空）。我们在此时可以进行一些简单的Ajax，并可以对页面进行初始化之类的操作

2.beforeMount

它是在挂载之前被调用的，会在此时去找到虚拟Dom，并将其编译成Render

3.mounted

虚拟Dom已经被挂载到真实Dom上，此时我们可以获取Dom节点，$ref在此时也是可以访问的。我们在此时可以去获取节点信息，做Ajax请求，对节点做一些操作

4.beforeupdate

响应式数据更新的时候会被调用，beforeupdate的阶段虚拟Dom还没更新，所以在此时依旧可以访问现有的Dom。我们可以在此时访问现有的Dom，手动移除一些添加的监听事件

5.updated

此时补丁已经打完了，Dom已经更新完毕，可以执行一些依赖新Dom的操作。但还是不建议在此时进行数据操作，避免进入死循环（这个坑我曾经踩过）

6.beforeDestroy

在Vue实例销毁之前被调用，在此时我们的实例还未被销毁。在此时可以做一些操作，比如销毁定时器，解绑全局事件，销毁插件对象等

三、父子组件的生命周期

挂载阶段：父组件 beforeMount -> 子组件 created -> 子组件 mounted -> 父组件 mounted
更新阶段：父组件 beforeUpdate -> 子组件 beforeUpdate -> 子组件 updated -> 父组件 updated
销毁阶段：父组件 beforeDestroy -> 子组件 beforeDestroy -> 子组件 destroyed -> 父组件 destroyed

四、请求放在哪个生命周期更合适

为什么created时间比mounted早，请求确不放在created中？
首先，它确实是早了，但是早不了几微秒，所以这其实没有提高性能
其次，我们在created阶段并没有去做渲染，所以在接下来我们会去做Dom渲染，但是如果此时我们还做了Ajax操作，在Ajax结束之后就会返回数据，我们就会将其插入到主线程中去运行，去处理数据，但是我们要知道，在浏览器机制中，渲染线程跟js线程是互斥的，所以有可能我们做渲染的同时，另一边可能要处理Ajax返回的数据了，这时候渲染就有可能被打断，在处理完数组后，去进行重新渲染。
那如果在created中有多个Ajax呢？我们又要重新进行渲染，所以在created去做Ajax请求这明显不太合适。
还有，有的时候我们接到返回的数据的时候可能要在回调函数中去进行一些Dom的操作，可是created阶段我们还没有将真实Dom加载出来，所以相对而言我们还是在mounted去调用要好一些
如果是服务端渲染，我们将其放入created中进行，因为服务端不支持mounted。

原文地址：https://juejin.cn/post/7032881219524100132