Vue组件化：Vue构造函数VueComponent

VueComponent

1. 组件的本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的

// school本质是一个VueComponent构造函数 调试控制台可以明确的看到
const school = Vue.extend({
    template: `
        <div>
            <h2>学校的名称是：{{schoolName}}</h2>
            <h2>学校的地址是：{{address}}</h2>
        </div>
    `,
    data() {
        return {
            schoolName: '北京大学',
            address: '北京',
        }
    },
})

2. 我们只需要写或<school></school>,Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行：new Vue.component(options)

3. 特别注意：每次调用Vue.extend,返回的都是全新的VueComponent！！

// 执行  (school === student) = false  即school和student是两个不同的VueComponent实例
const school = Vue.extend({ options })
const student = Vue.extend({ options })

4.关于this的指向:

1. 组件配置中，data函数，methods中的函数，computed中的函数...，它们的this均是【VueComponent实例对象】
2. new Vue(option)中，data函数，methods中的函数，computed中的函数...，它们的this均是【Vue实例对象】

5. VueComponent的实例对象，可以简称为vc，即组件实例对象
   Vue的实例对象，以后简称vm

6. vm管理多个vc，存储在vm的$children中

7.vc与vm的区别是：vc没有el配置项，vc的data配置项可以写成对象形式，而不用担心互相干扰，因为每次引用的vc都是一个新的实例