vue 生命周期的详解

一.vue生命周期的解析

> 1>什么是vue生命周期

每个vue实例在被创建之前都要经过一系列的初始化过程，这个过程就是vue的生命周期。详细来说，就是Vue实例从开始创建，初始化数据，编译模板，挂在dom->渲染，更新->渲染，卸载等一系列过程，我们称这是vue的生命周期，各个阶段有相对应的事件钩子。

> 2>vue生命周期都有哪些，对应的钩子函数可以做什么**

首先，Vue官网的生命周期的图很清楚明了的表明有哪些钩子函数，然后我们对应每个钩子函数详细讲解一下。

> （1）new Vue()

实例化vue对象

> （2）init events 和 init cycle

初始化事件和生命周期

> （3）beforeCreate钩子函数

在实例初始化之后，this指向创建的实例，不能访问到data,computed,watch，methods上的方法和数据。此时，vue组件对象被创建，但是vue对象的属性还没有绑定，即没有值。也就是说，在beforeCreate函数，是在实例初始化之后，数据观测和event/watcher事件配置之前被调用。

beforeCreate() {
console.log('创建前-挂在', this.$el)
console.log('创建前-data', this.$data)
},

打印结果：

实践场景--常用于初始化非响应式变量

> （4）init injections & reactivity
挂在数据（属性赋值），包括属性和computed的运算.在beforeCreated和created两个钩子函数之间发生。

打印结果：

通过打印结果，发现计算属性的值在beforeCreated钩子函数中拿不到，在created钩子函数中拿得到，说明计算属性是在beforeCreated和created这两个钩子函数之间进行处理赋值的。