mini-vue之组件的实现和渲染流程 以及局部和全局组件建立的联系

实现组件

vue的diff算法
Vue中，一般一个项目只有一个根组件，也就是 new Vue产生的app。

但是一个页面不可能只由一个组件构成，很明显我们需要实现自定义组件。

vue中提供了两种自定义组件的方式：

1. 全局组件
2. 局部组件

组件的使用流程：

在任意一个组件中，都可以使用其他组件。当我们在一个组件中使用其他组件的时候，会先去组件内部的局部组件中找是否定义过该组件，如果定义了，则直接使用该局部组件；如果没有定义局部组件，则去全局组件中寻找（和js中的原型，原型链很像了）。所以vue内部很可能也是利用类似于继承的这种模型实现组件的定义的。

其实vue内部在定义组件的时候，表面上我们是传递了一个对象：

Vue.component("cmp",{
   
   
    //...
})

实际上这个对象内部也会被Vue.extend给包裹，变成子类.

Vue.component("cmp",Vue.extend({
   
   
    //...
}))

组件的三大特性

1. 自定义标签
2. 组件有自己的属性和事件
3. 组件的插槽

Vue.extend的实现

既然组件的实现内部还是需要调用extend方法，那么就先把extend实现出来。

**用法：**使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

实现：

这个实现就不难了：不过就是实现一个构造函数，让该函数继承Vue而已。就是组合式继承。

/**
   * 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
   * 返回值是一个构造函数 通过new可以创建一个vue组件实例
   * @param {
   
   {data:Function,el:string}} options
   * @returns
   */
Vue.extend = function (options) {
   
   
    // 组合式继承 Vue
    function Sub(options = {
    
    }) {
   
   
        // 最终使用的组件 就是 new 一个实例
        this._init(options);
    }
    Sub.prototype = Object.create(Vue.prototype);
    Object.defineProperty(Sub.prototype, "constructor", {
   
   
        value: Sub,