vue生命周期和组件传值

vue生命周期钩子函数（目前有11个，8个常用的）

（1）beforeCreate（创建前）

详　　细：在实例初始化之后，数据观测和event/watcher事件配置之前被调用

组件状态：实例初始化之后，this指向创建的实例，不能访问到data、computed、watch、methods上的方法和数据

最佳实践：常用于初始化非响应式变量

（2）created（创建后）

在实例创建完成后被立即调用；

实例已完成：数据观测，属性和方法的运算，watch/event事件回调；

挂载还没开始，$el属性（视图）目前不可见。

（$el --> Vue实例使用的跟DOM元素）

组件状态：实例创建完成，可访问data、computed、watch、methods上的方法和数据，未挂载到DOM，不能访问到el属性，el属性，ref属性内容为空数组

最佳实践：常用于简单的ajax请求，页面的初始化

（3）beforeMount（载入前）

在挂载开始之前被调用：相关的render函数首次被调用

（在服务端渲染期间不被调用）

组件状态：在挂载开始之前被调用，beforeMount之前，会找到对应的template，并编译成render函数

（4）mounted（载入后）

el被新创建的vm.$el替换，并挂载到实例上去之后调用

所有的子组件不一定都会被挂载，想要等整个视图都渲染完毕，可以用vm.$nextTick替换掉mounted：

mounted:function(){

this.$nextTick(function(){

})

}

（在服务端渲染期间不被调用）

组件状态：实例挂载在DOM上，此时可以通过DOM API获取到DOM节点，$ref属性可以访问（视图可见，子组件不一定全部被挂载）

最佳实践：常用于获取VNode信息和操作，ajax请求

（5）beforeUpdate（更新前）

（在服务端渲染期间不被调用，因为只有初次渲染会在服务端进行）

组件状态：响应式数据更新时调用，发生在虚拟DOM打补丁之前

最佳实践：适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器

（6）updated（更新后）

（在服务端渲染期间不被调用）

详细：updated不承诺所有的子组件都一起被重绘，等重绘完毕，可以用vm.$nextTick替换updated（同mounted）

组件状态：虚拟DOM重新渲染和打补丁之后调用，组件DOM已经更新，可执行依赖于DOM的操作

最佳实践：避免在这个钩子函数中操作数据，可能会陷入死循环（可增加开关操作解决）

（7）beforeDestroy（销毁前）

（在服务端渲染期间不被调用）

当切换组件（当前组件未缓存）时，会执行beforeDestroy/updated钩子函数

组件状态：实例销毁之前调用，这一步，实例仍然可以使用，this仍能获取到实例

最佳实践：常用于销毁定时器、解除绑定全局时间、销毁插件对象等操作

（8）destroyed（销毁后）

（在服务端渲染期间不被调用）

组件状态：实例销毁后调用，调用后，vue实例指示的所有东西都会解除绑定，所有的事件监听器都被移除，所有的子实例也会被销毁

注意：（1）created阶段的ajax请求和mounted请求的区别：前者视图未出现，如果请求信息过多，页面会长时间处于白屏信息；

（2）mounted不会承诺所有的子组件也都一起被挂载，如果希望等到整个视图都渲染完毕，可以用vm.$nextTick;

2.组件之间的传值
父组件到子组件：在子组件标签上绑定自定义属性，属性值为父组件需要传递的数据，子组件内部通过props接收组件的属性名。（属性名一般以数组的形式）

子组件到父组件：在子组件标签上绑定自定义事件，值为父组件函数，子组件内部通过$emit给该事件推送数据，父组件内部通过函数参数进行接收。

平行组件的传值：通过eventbus的方式监听事件，首先需要先创建一个eventbus的方式监听事件，首先需要先创建一个eventbus的事件容器，哪里需要哪里引用。然后再通过emit派发事件，emit派发事件，on来接收。