Vue 生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

生命周期四个阶段

1. 创建
2. 挂载
3. 更新
4. 销毁

生命周期函数

created

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

beforeMount

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

mounted

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

beforeupdate

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

updated

此时补丁已经打完了，Dom更新完毕，可以执行些依赖新的Dom操作，但不建议进行数据操作，避免进入死循环

beforeDestroy

在Vue实例销毁前被调用，实例还没被销毁，可以做一些操作，比如销毁定时器、解绑全局事件、销毁插件对象等

父子组件的生命周期

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

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

created的时间更早，但是比mounted早不了几微秒

在created没有做渲染，在接下来才去做Dom渲染，但是如果在created做了Ajax操作，在Ajax结束之后会返回数据，将其插入到主线程中去运行，去处理数据，但是在浏览器机制中，渲染线程和js线程是互斥的，所以有可能做渲染的同时，另一边可能要处理Ajax返回的数据，这时候渲染可能被打断，在处理完数组后，进行重新渲染

有时接到返回的数据，可能需要在回调函数中去进行一些Dom操作，可是created阶段还没有将真实Dom加载出来，相对而言，用mounted去调用更好

如果是服务端渲染，服务端不支持mounted，只能放入created中进行