vue 组件

1创建：

var MyComponent = Vue.extend({  // 选项...})

可用它创建一个组件构造器

可以把它配置在组件的commponent:{}，定义为私有组件，为局部注册

也可以在路由router配置时用作components:Mycomponent

还可以注入到全局上，全局使用Vue.component(name,MyComponent)

全局定义组件简写：

// 全局注册组件，tag 为 my-componentVue.component('my-component', MyComponent)

如果是公用组件那么在创建时data就不能直接是个对象了

需要写成函数 内部返回对象 。不然所有的实例组件都公用同一个data对象了

webpack内组件的写法：

后缀为.vue

style 定义组件样式

tempalte 定义组件模板

script 定义组件，写法module.exports={}。在对象内定义组件即可

对于require() 引用css 是不可行的，它和react还不一样

动态切换组件：

多个组件可以使用同一个挂载点，然后动态地在它们之间切换。使用保留的 <component> 元素，动态地绑定到它的 is 特性：

<component :is="currentView">
 <!-- currentView 为要加载的组件名，修改组件名来实现加载不同的组件，实现切换 -->
</component>

可为其定义transition  过渡动画

transition-mode 专门用在动态组件切换时如何过渡
参数是in-out out-in 一个是新组件先进，旧组件后出
一个是旧先出，新后进

组件的挂钩activate

执行顺序：created activate ready

activate的函数参数是done,此方法会阻塞执行，只有调用了done()后才会执行后边代码

这样就可以在此方法内做ajax请求，成功后修改数据再ready 渲染到页面

它只是阻塞了此组件之后的执行，并不会阻塞其子组件的执行。

组件嵌套下activate的执行：

首先会扫描模板找出所有组件，并执行它们，在组件的created 时解析模板。

当遇到activate时挂起执行其他的

只有组件的done执行了它才会ready渲染出来

如果子组件先done了那么它还需要等待父组件done完后才能渲染

如果子组件done需要好久，那父组件done完后就渲染了，子组件什么时候done了才渲染

它的用处：

对于需要数据加载完后才能显示组件的情况下。

一般写组件都是先渲染完在ready内ajax 数据，成功后再更新下数组，重新渲染。

组件周期：

created ready  这是创建

当切换路由时会执行beforeDestroy方法这里可以销毁或解除dom绑定

但对于路由router-view 设置了缓存keep-leave 时，就不一样了

第一次进行路由时，组件创建还是一样的

但是当切换路由时，它会缓存组件，并不会销毁它