Vue声明周期

什么是vue的生命周期

Vue实例从创建到销毁的过程，就是生命周期

• 创建、初始化数据、编译模板、挂载DOM、渲染、更新、渲染、销毁等一系列过程

Vue生命周期可以简单分为四个阶段:

• 创建阶段 beforeCreate,created
• 挂载阶段 beforeMount,mounted
• 运行阶段 beforeUpdate,updated
• 销毁阶段 beforeDestroy,destroyed

所有生命周期钩子函数自动绑定this上下文实例中，因此你可以访问数据,你不能用箭头函数来定义一个生命周期方法（例如created: () => this.fetchTodos()）。因为箭头函数绑定了父级上下文，因此this与vue的实例不同，this.fetchTodos的行为未定义

---

创建阶段

创建阶段可以看作是一个vue实例生命的开始，这个阶段vue组件开始初始化，vue开始观察数据，这个阶段你有beforeCreate和created两个生命周期函数

beforeCreate: 在初始化实例之后，数据观测和event\watcher事件配置之前被调用

beforeCreate是new Vue之后触发的第一个钩子函数,此时data、methods、computed、以及watch上的数据和方法还未初始化，都不能被访问

---

created

在实例创建完成之后立即被调用，此时已完成以下的配置：数据观测、property和方法的运算，watch、event事件回调，然而挂载阶段还没开始，$el目前上不可用，也就是可以使用数据、更改数据，在这里更改数据不会触发updated函数

• data和methods都已经被初始化好了，如果需要调用methods中的方法，或者操作data中的数据，可以在这个阶段中操作
• 无法与DOM进行交互，如果需要，可以通过vm.$nextTick来访问DOM
• 异步数据的请求适合在created钩子中使用，例如数据初始化

---

挂载阶段

这个阶段将实现 DOM 的挂载，这标志着我们可以在浏览器里中看到页面了。

beforeMount

• beforeMount发生在挂载之前，在这之前template模板已经导入render函数编译，此时虚拟DOM已经创建完成，即将开始渲染，在这一阶段有可以对数据进行更改，不会触发updated函数

• 执行到这个钩子函数的时候。在内存中已经编译好了模板，但是还没有挂载到页面中，此时页面还是旧的

<