Vue生命周期

Vue生命周期

	随笔记，使用前端框架Vue.js开发时需要理解的逻辑关系。

1.Vue的生命周期简单理解：
vue每个组件（可重复使用的Vue实例，可作为自定义元素来使用）独立。每个组件都有一个属于他自己的生命周期，一个组件从创建–>数据初始化–>挂载–>更新–>到销毁结束后，这就称之为组件的生命周期。

2.Vue8个生命周期函数：
**beforeCreate：**创建Vue实例之前（只有默认的一些生命周期和默认的一些事件，data和methods还没有被初始化）
**created：**数据已经在data方法中初始化了，计算属性，事件回调都已经完成，只不过dom并未挂载
挂载之前回进行得操作会找是否有需要挂载得el对象，有的话判断是否有template模板，有得话那么将模板转化为render函数，通过render函数去渲染DOM树
如果都没有得话，直接把最外层得el对象作为html得模板（data和methods已经被初始化了，最早可以调用到方法和数据的地方就是created）
**beforeMount：**方法首次被调用生成虚拟DOM（在内存中已经渲染好了模板但并未挂载到页面中此时的页面还是旧页面）
**mounted：**挂载已经完成了，dom树已经完成渲染到页面中得，所以在这时我们可以对真实dom进行操作了（把内存中的模板替换到网页上，此时已经生成真实的dom了）
**beforeUpdate：**数据有更新，更新之前调用（data数据已经更新为最新的数据，页面的数据还是旧的）
**updated：**数据更新之后（页面数据和data数据均被更新）
**beforeDestroy：**实例销毁前（进入销毁阶段，此时所有的data和methods还未被销毁，处于可用状态）
**destroy：**组件销毁之后（销毁完成，所有的数据，方法，指令、过滤器都被销毁，不可使用了）
具体在何时调用如下图：
3.vue中内置方法属性（methods，data，props，watch，computed）和vue生命周期运行顺序：
props => methods =>data => computed => watch
具体每种属性的介绍和区别：https://www.cnblogs.com/icctuan/p/11752915.html
4.自己构建的方法与vue生命周期的运行顺序：
在开发项目经常用到$refs来直接访问子组件的方法，不过这样调用的时候可能会导致数据的延迟滞后的问题，出现bug。
结局方法则是推荐异步回调的方法，然后传参，依照vue的生命周期可以解决 推荐es的promise。
最后，如果有什么遗漏或错误感谢各位小伙伴们的指正！一起学习，一起进步！