从0开始学Vue系列15--`_VueComponent`构造函数和一个重要关系一起养成写作习惯！这是我参与「掘金日新计

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第16天，点击查看活动详情。

我要一步一步往上爬~大家好，我是努力不浪费每分每秒热爱生活的小朋友，今天我们来一起学习一下_VueComponent构造函数和一个重要关系

1. `_VueComponent`构造函数

代码展示：

<body>
    <div id="root">
        <school></school>
        <hello></hello>
    </div>
</body>

<script type="text/javascript">		
    //定义school组件
    const school = Vue.extend({
        name:'school',
        template:`
            <div>
                <h2>学校地址：{{address}}</h2>	
                <button @click="showName">点我提示</button>
            </div>
        `,
        data(){
            return {
                address:'北京'
            }
        },
        methods: {
            showName(){
                console.log('showName',this)
            }
        },
    })

        //定义hello组件
        const hello = Vue.extend({
            template:`
                <div>
                    <h2>{{msg}}</h2>
                </div>
            `,
            data(){
                return {
                    msg:'你好啊！'
                }
            }
        })

        console.log('@',school)
        console.log('#',hello)

        //创建vm
        const vm = new Vue({
            el:'#root',
            components:{school,hello}
        })
    </script>
</html>

school组件本质上是VueComponent构造函数，我们可以从下图的vue.js源码片段中看出，是由Vue.extend生成的

图片4.png

我们借助hello组件，下图中输出日志console.log('@',school)、 console.log('#',hello)，可以看出，每次调用Vue.extend都返回一个VueComponent，但是每一次都VueComponent都是现定义的，不是公用一个VueComponent。所以每次调用Vue.extend，返回的都是一个全新的VueComponent。

图片5.png

我们只需要写<school/>/<school></school>组件标签，Vue在解析时会自动帮我们创建school组件（构造函数）的实例对象，也就是Vue帮我们执行new VueComponent(options)，传入的配置对象包括这里的name、template、methods对象。
this指向

new Vue(options)配置中的data、methods、watch、computed中的函数，它们的this是指Vue实例对象vm

在组件配置中的data、methods、watch、computed中的函数，this则是指向VueComponent实例对象

<button @click="showName">点我提示</button>点击按钮，showName()方法输出的log可以看出，this指向VueComponent实例对象，data中的数据通过数据代理出现在了VueComponent身上

图片6.png

下图可以看出，vm是管理着这些组件的

图片7.png

2. 内置关系

图片8.png

组件是可复用的vue实例，所以他们和new vue时接收到配置项是一样的，el是根实例特有的配置
重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype

从图中可以看出：引入vue.js后，vue构造函数身上有一个prototype显式原型属性，vue原型对象上所有的属性方法，vue的实例对象vm都是可以用的，实例对象本身只有隐式原型属性__proto__，实例隐式原型属性永远指向自己缔造者的原型对象,所以vue的原型对象指向object，

在VueComponent身上，vue做了一件事，就是让VueComponent原型对象的隐式原型属性直接指向了vue的原型对象，原本是直接指向object的。

这么做的目的：让组件实例对象也可以使用 Vue原型上的属性、方法

从0开始学Vue系列15--`_VueComponent`构造函数和一个重要关系

1. _VueComponent构造函数

2. 内置关系

1. `_VueComponent`构造函数