Lifecycle

今天要介绍的是Vue生命周期的四个阶段，先来看一张官网中Vue的生命周期图吧!

首先当然是要建立一个vue的实体也就是我们在每个专案中都会看到的new Vue()
接着就是进入Vue的4个阶段
第一部分是初始化阶段:
当我们把值injection到资料中，会触发befoeCreate和created两个hook，在befoeCreate时我们的资料和元素都还没有被建立，要到了created的阶段才有真正完成create的动作，但是create的时候我们的element还是没有被挂载完成的喔!
第二部分是挂载阶段:
这里是挂载前後的两个hook，一个是beforeMount它是在要显示到网页画面之前的挂载，也就是在complier之前会走到beforeMount；而另一个是mounted就是真正的挂载到画面上，所以这个时候我们才能真正的去使用element
第三部分是更新阶段:
这是一个会很频繁触发的阶段，因为我们的资料只要有做变动就会触发到beforeUpdate和Updated
最後一部分是销毁阶段
beforeDestroy是销毁前的阶段，是最後可以操作里面资料的阶段，当进入destroyed阶段就是整个生命周期的结束

进入今天的实作前我们先来看官网上的一段说明

Don’t use arrow functions on an options property or callback, such as created: () => console.log(this.a) or vm.$watch('a', newValue => this.myMethod()). Since an arrow function doesn’t have a this, this will be treated as any other variable and lexically looked up through parent scopes until found, often resulting in errors such as Uncaught TypeError: Cannot read property of undefined or Uncaught TypeError: this.myMethod is not a function.

这里他告诉我们不要使用arrow functions去做生命周期的hook，因为在箭头函式中是没有this的，所以他会使用到父层的this

接下来我们使用console.log方法到chrome的console来看一下生命周期的变化吧!

这是刚开启的画面，从Console中我们可以看到资料已经挂载在我们的画面上，也就是走到了我们的mounted阶段