vue生命周期函数以及组件之间的传值

了解vue的生命周期，先看一下下面这张图

生命周期函数就是vue实例在某一个时间点会自动执行的函数

当我们创建一个实例的时候，也就是我们调用 new Vue() 这句话的时候，vue会帮助我们去创建一个实例，创建过程其实并不像我们想的那么简单，他要经过很多的步骤

Init(Events & Lifecycle):首先他会去初始化事件和生命周期相关的内容,当最基础的初始化完成的时候，在这个时间点上，vue会自动的帮我去之行一个函数，这个函数就是beforeCreate

beforeCreate：既然beforeCreate被自动之行，那么beforeCreate就是一个生命周期函数。

var vm = new Vue({
　　el:'#app',
　　beforeCreate:function(){
　　　　console.log('before create')
　　}
})

我们发现这个在控制台被自动输出了，就是vue自动执行了beforeCreate这个函数，处理完这个函数，vue会继续调用一个写外部的注入，包括双向绑定的相关内容
Init(injections & reactivity): 外部的注射，各种绑定的初始化，这部分初始化完成的时候，基本上vue实例的初始化操作都完成了，在这个结点上，又会有一个自动的函数被执行,这个函数的名字叫created。

created：这也是一个生命周期函数，因为他完全符合生命周期函数的定义。

var vm = new Vue({
　　el:'#app',
　　beforeCreate:function(){
　　　　console.log('before create')
　　},
　　created:function(){
　　　　console.log('created')
　　}
})

可以看到beforeCreate执行之后，created也被自动的执行了，继续看这张图

Has ‘el’ options:是否有el这个选项
Has ‘template’ optioins: 是否有template这个属性
　　no->Compile el’s outerHtml as template: 如果实例里面没有tempalte这个属性，会把外部el挂载点的html当作模板
　　yes->Compile template into render functoin: 如果实例里面有tempalte，这个时候就会用template去渲染
但是有了模板之后并没有直接渲染到页面上，在渲染之前，又自动到去执行了一个函数，这个函数是beforeMount

beforeMount:这个函数也是一个生命周期函数，也就是模板即将挂载到页面到一瞬间，beforeMount会被执行

var vm = new Vue({
　　el:'#app',
　　template:'<h1>hello</h1>',
　　beforeCreate:function(){
　　　　console.log('before create')
　　},
　　created:function(){
　　　　console.log('created')
　　},
　　beforeMount:function(){
　　　　console.log('before mount')
　　}
})