[Day 7] Vue的生命周期

接下来的东西越来越复杂了，不知道要怎麽打才会让人比较好理解，希望大家可以给我点建议ಥ-ಥ，有错还请严厉指正我(前提是有人在看我的文章?)。

必须存在的前言

每个Vue instance都要经过一系列的初始化过程，像是需要设置数据监听、编译模板、将instance挂载到DOM并在数据变化时更新DOM等等，同时在这些过程中也会运行一些叫做lifecycle hooks(生命周期钩子)的函数，为使用者创造了在不同阶段增加自己代码的机会。

lifehook简介

先看几个lifehook来做简介~

beforCreate---在instance初始化之後，data observer和event/watcher配置之前被调用。
created---在instance被创建完成後立即被调用。在这一步instance已经完成以下配置，data observer、property和方法配置、watch/event callbacks(回调)，但是mounting(安装)阶段还没开始，$el property还不行使用。
beforMount---顾名思义就是在mounting之前被调用，相关的render function第一次被调用。
mounted---inatance被mounted後调用，el被新创建的vm.$el替换，mounting成功。
beforUpdate---数据更新之前调用。
updated---组件DOM已经更新，组件更新完毕时调用。

小应用

来个小小的实际应用来观察这些lifecycle hooks
lifecycle hooks需要以属性的方式写在Vue instance里面。
还有一点要特别注意，生命周期函数不能使用arrow function(箭头函数)，因为箭头函数没有this，lifehooks的this上下文指向调用它的Vue instance。

先看一下控制台运行的顺序

发现依序是beforeCreat、created、beforeMount、mounted，最後因为有加上3秒後更改变量，所以控制台里也会出现beforeUpdate、updated这样的lifecycle。