Vue的组件

Vue组件都是Vue实例，并且接受相同的选项对象。比如：
template
data
function
watch
computed
methods
钩子函数
注意：除了el不可用

下面的例子说明了，data为什么是一个函数，而不是一个对象
在之前，data指向一个对象时用于数据绑定，模板渲染。但是在使用的组件的时候则是不同的。
其实使用一个组件大致分为：
创建虚拟的组件构造器（类似构造函数）
注册组件
使用组件
。
在注册组件，可以理解为声明组件的时候，其实相当于创建组件构造器的引用。而使用组件的时候则是创建组件构造器实例对象。
假设data存放的是一个对象的引用，那么他们在创建实例的过程中里面的data属性存放的是对象的地址，所以他们共享同一个对象。如果一方改变，另一方会跟着改变。
但是如果data存放的是函数，并且函数返回的是一个对象，那么他们在创建实例的过程中里面的data属性存放的是不同对象的地址，所以他们是相互独立的。可以看成是他们各自私有的地方。
具体点击
和

    Vue.component('Vbutton', {   全局组件 可以直接使用
        template: '<button @click="count++">点击了{{count}}次</button>',
        data: function () {
            return {
                count: 0
            }
        }
    })

    var Vcontent = {		局部组件
        template: '<div class="content"><Vbutton></Vbutton>我是内容区域</div>',
        data: function () {
            return {

            }
        }

通过Prop向子组件传递数据

现在的理解还不是很深，就是Prop是用来父组件向子组件传递数据，并且子组件不能向父组件传递，实现一个数据单向传递消息。
静态传递
动态传递

子组件向父组件传递消息

可以在父组件中利用v-on来创建事件监听器，该监听器为子组件的事件名，接着可以写自己的逻辑事件。
子组件添加内建的 $emit方法，里面有两个参数，第一个参数是事件名，第二个参数是可以传递的值，父组件可以利用 $event接收，也可以在自己的methods里面作为第一个形参。

通过插槽分发内容

动态组件

解析DOM模板的注意事项

监听器

computed计算属性

1. computed与methods的区别：
   首先computed必须要有返回值，而methods不要求有返回值。
   然后computed是依赖于响应式的，存在缓存中。如果响应式的数据没有发生改变，那么返回的还是之前那个值。
   最后调用computed里面的方法不用括号，而methods需要括号
2. computed与watch的区别：

一个Vue应用=Vue根实例+Vue组件

生命钩子函数
每个实例在创建时都要经过一系列初始化过程，需要设置数据监听、模板编译、将实例挂在在DOM上并更新。。在运行的时候为了让用户可以在不同阶段添加代码，有一些生命钩子函数。

其中暂时不能理解：
在实例选项中或者回调函数中不使用箭头函数，因为没有this

呈现了一个Vue实例创建，初始，销毁的过程。接下来对他们进行解释：

1. new Vue()：实例创建开始，创建一个实例
2. Init Events & Lifecycle：初始化组件的实例和生命周期函数，然后等着调用
3. beforeCreate：组件的数据对象和方法都没有初始化，所以这个阶段什么都做不了，只能操作一些加载啊什么的
4. Init injections & reactivity ：组件的数据对象和方法初始化
5. created：虽然数据对象和方法可以使用了，但是页面还没有渲染出来，这个阶段一般是发起Ajax请求
6. 此时正在解析模板和所有指令，解析完放在内存中，还没有挂在页面上
7. beforeMount :挂载页面之前调用
8. 把内存中的模板结构放在页面上
9. mounted ：页面渲染好了调用，调用完后就进入运行阶段
10. beforeUpdate ：数据肯定会更新的，更新数据前调用，此时数据是旧的数据
11. 更新数据，重新渲染模板结构，替换页面
12. updated ：更新数据后调用
13. beforeDestroy ：组件要销毁之前调用
14. 销毁啦
15. destroyed ：销毁之后调用，什么都不能用了
    参考