       // 定義一個(gè)構(gòu)造函數(shù)
        function Demo() {
            this.a = 1
            this.b = 2
        }
        //創(chuàng)建一個(gè)Demo實(shí)例對(duì)象
        const d = new Demo()
        console.log(Demo.prototype); //顯示原型屬性
        console.log(d.__proto__); //隱式原型屬性
        console.log(Demo.prototype === d.__proto__); //true
        //程序員通過(guò)顯示原型屬性操作原型對(duì)象，追加一個(gè)x屬性，值為99
        Demo.prototype.x = 99
        console.log('@',d.__proto__.x);

根據(jù)下面這個(gè)組件來(lái)分析 VueComponent

<body>
    <div id="root">
         <school></school>
    </div>
    <script>
        Vue.config.productionTip = false
        //定義school組件
        const school = Vue.extend({
            name: 'school',
            template: `
              <div>
                <h2>學(xué)校名稱：{{name}}</h2>
                <h2>學(xué)校地址：{{address}}</h2>
              </div>
            `,
            data() {
                return {
                    name: '尚硅谷',
                    address: '北京'
                }
            }   
        })
        //創(chuàng)建Vue
        new Vue({
            el:'#root',
            components:{
                school,
            }
        })
    </script>
</body>

1、school組件本質(zhì)是一個(gè)名為VueComponent的構(gòu)造函數(shù)，且不是程序員定義的，是Vue.extend生成的

2、我們只需要寫<school/>或<school</school>,vue解析時(shí)會(huì)幫我們創(chuàng)建school組件的實(shí)例對(duì)象；即Vue幫我們執(zhí)行的：new VueComponent(options)

3、特別注意：每次調(diào)用Vue.extend，返回的都是一個(gè)全新的VueComponent

4、關(guān)于this指向：

組件配置中：data函數(shù)、methods中的函數(shù)、watch中的函數(shù)、computed中的函數(shù) 它們的this均是 VueComponent實(shí)例對(duì)象
new Vue(options)配置中：data函數(shù)、methods中的函數(shù)、watch中的函數(shù)、computed中的函數(shù) 它們的this均是 Vue實(shí)例對(duì)象