组件的初始化流程

本节目标：理解“组件的初始化流程”的核心思路，并能把它用于实际开发或面试表达。

说明：原 OneNote 中有图片引用，但图片未包含在导出目录中；本页保留了可用的文字与代码内容。全局组件和局部组件

全局组件：使用Vue.component创建的组件，可以在整个应用中使用；比如创建了很多个Vue实例，可以在它们中直接使用全局组件；

局部组件：在new Vue()实例时，在实例中使用components定义的组件，则只能在这个Vue实例中使用；

局部组件优先级高于全局组件，即优先使用局部组件，再选择使用全局组件；这是一个类似于作用域链的查找机制，局部组件并不会覆盖全局组件；

Vue.component() 方法在内部会调用 Vue.extends

Vue.extend( options )

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

data

选项是特例，需要注意 - 在

Vue.extend()

中它必须是函数

<div id="mount-point"></div>
//

创建构造器

var Profile = Vue.extend({
    template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
    data: function () {
        return {
            firstName: 'Walter',
            lastName: 'White',
            alias: 'Heisenberg'
        }
    }
})
//

创建

 Profile

实例，并挂载到一个元素上。

new Profile().$mount('#mount-point')

结果如下：

<p>Walter White aka Heisenberg</p>

Vue.component( id, [definition] )

参数：

{string} id
{Function | Object} [definition]

用法：``注册或获取全局组件。注册还会自动使用给定的

id

设置组件的名称

//

注册组件，传入一个扩展过的构造器

Vue.component('my-component', Vue.extend({ /* ... */ }))
//

注册组件，传入一个选项对象

自动调用

 Vue.extend)
Vue.component('my-component', { /* ... */ })
//

获取注册的组件

始终返回构造器

)
var MyComponent = Vue.component('my-component')

为什么data必须是函数；

典型的继承一、Sub.proto=Object.create(sup.prototype) 相当于Sub.prototype.proto=Super.prototype,会影响子类constructor的指向；其源码：

二、Object.setProtoTypeOf();

每次调用vue.component()时，实际际在内部调用vue.extend();

Vue.extend方法内部的主要逻辑是创建一个子类，这个子类继承了vue；
然后把vue上的options合并到子类上；
最后，返回这个子类；

所以我们可以利用vue.extend返回的子类来创建实例，这个实例继承可以调用vue上的所有方法。

组件的初始化流程 ​

组件的初始化流程