VUE生命周期及业务使用场景（总结篇)

vue 2.0  VS  vue 3.0

beforeCreate  (组件创建前)

// 实例被创建前执行
 // 执行函数时 data 和 methods 还没有被初始化

当前实例主要做了vm实例一些属性的定义和createElement()方法的封装（创建前，访问不到data当中的属性以及methods当中的属性和方法，可以在当前生命周期创建一个loading，在页面加载完成之后将loading移除）。其实在日常开发中并不常用，描述并不贴切和形象，这篇文章描述的挺详细的推荐---＞＞ beforeCreate()前做了什么

created  (组件创建完成)

// 实例被创建之后执行
 // 执行函数时data 和 methods 初始化完成。但是模板还未开始编辑
 // 运用场景：1) Ajax 异步数据请求 2) 初始化操作

Init (初始化) injections (依赖注入) & reactivity (开始响应)，一般通过ajax请求初始化数据。                             当前生命周期执行的时候会遍历data中所有的属性，给每一个属性都添加一个getter、setter方法,将data中的属性变成一个响应式属性                                                                                                                                当前生命周期执行的时候会遍历data&&methods身上所有的属性和方法,将这些属性和方法代理到vue的实例身上　　                                                                                                                                                         在当前生命周期中我们可以进行前后端数据的交互(ajax请求)。推荐---＞＞vue.js中created方法的使用详解

beforeMount  (组件挂载之前)

// 实例挂载前执行
 // 此时模板已经编辑完成到内存中。但是还未渲染到 DOM，固页面未展示

载入前（完成了data和el数据初始化），但是页面中的内容还是vue中的占位符，data中的message信息没有被挂在到Dom节点中，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取。    **注意此时还没有挂载html到页面上。

mounted  (组件挂载完成)

// 实例挂载后执行
 // 此时已经渲染了DOM，可以调用插件操作 DOM
 // 运用场景：挂载元素内dom节点的获取。可以配合$.nextTick 使用进行单一事件对数据的更新后更新dom

在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

beforeUpdate  (数据更新之前，虚拟 DOM 打补丁之前)

// 数据更新前执行
 // data 数据有更新时，内存中重新编译了最新模板字符串，但还未重新渲染DOM

状态更新之前调用。当内存中实例的 data 数据更新时触发。此时内存中 data 是最新的，但是还未重新渲染DOM节点。

updated (数据更新之后，虚拟 DOM 渲染完成)

// 数据更新后执行
 // 已经重新渲染 DOM
 // 运用场景：对数据更新作统一逻辑业务处理

在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

待续