vue入门必备（1.0）

VUE全家桶系列之生命周期和组件详解
1.生命周期
vue每个组件都是独立的，所以可以组件复用，使项目模块化，使项目的可维护性提高，扩展性能也更好
每个组件都有属于自己的生命周期
生命周期分为以下几个阶段：
beforeCreate（组件实例刚被创建，属性计算之前）
create（创建已完成，属性已绑定，但DOM还未生成）
beforeMount（模板编译，挂载之前）
mounted（挂载之后，此时可进行一下ajax请求，只进行一次）
beforeUpdate（组件更新之前）
Updated（组件更新之后）
activated（组件被激活时调用）
deactivated（组件被移除时调用）
beforeDestory（组件销毁前调用）
destoryed（组件销毁后调用）
2.组件
项目中有很多需求会重复出现，为使代码精简且易于管理维护，通常我们会注重将项目拆解细化。按照模块划分，每个模块都将可以实现为一个组件，然后在项目中重复利用，使开发效率大大提高。
组件可分为全局组件和局部组件
全局组件

Vue.component("component1",{
	template('<p>我是全局组件<h1>'+'我是内标签</h1></p>'),
	 data:function(){
            return {
                m1:10
            }
        },
})
new Vue({
    el:"#app"
});

全局组件注册方式：Vue.component(组件名,{方法})
全局组件必须写在Vue实例创建之前，才在根元素下面生效。且模板的第一级只能有一个标签，不能并行
局部组件

<div id="app1">
    <child-component></child-component>
</div>
<script>
	import component form './child-component'
    new Vue({
        el: "#app1",
        components:{
            "child-component":{component }
        }
    });
</script>

局部组件注册方式：components：{组件名}
复用组件的关键就是父子组件通信传值，动态改变数据。
组件通信传值分为：①父子组件传值②子父组件传值③兄弟组件传值
①父子组件传值

//父组件将msg传给子组件
 <div id="app">
        <info :msg="msg"></info>
  </div>
//子组件利用props接收
 props:['msg']

②子父组件传值

//父组件绑定事件
<info @child="accept"></info>
//子组件触发事件
send:function(){
    this.$emit('child',this.msg)
}

③兄弟组件传值
利用中间栈作为桥梁传值
1.新建bus.js文件

const install = function (Vue) {
  const Bus = new Vue({
    methods: {
      emit (event, ...args) {
        this.$emit(event, ...args)
      },
      on (event, callback) {
        this.$on(event, callback)
      },
      off (event, callback) {
        this.$off(event, callback)
      }
    }
  })
  Vue.prototype.$bus = Bus
}

export default install

2.在main.js中全局引入

import VueBus from './common/vue-bus'
Vue.use(VueBus)

3.兄弟组件传递数据

//触发事件
this.$bus.emit(方法名, 参数)
//接收事件
this.$bus.on(方法名, (参数) => {
    })

接下来描述的就是动态组件
动态组件是通过is属性动态去切换组件。为了实现多个组件使用同一个挂载点，并动态切换,动态切换的组件是被移除掉了，如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染,这就需要keepalive来保存。

//根据is属性切换不同的组件
<component :is="component_name" ></component>