VueComponent介绍&一个重要的内置关系（VueComponent.prototype.proto===Vue.prototype）

Maiko Star

已于 2023-07-14 17:21:23 修改

阅读量1.9k

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2023-07-14 16:59:35 首次发布

本文链接：https://blog.csdn.net/weixin_55772633/article/details/131707677

版权

Vue 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

一、VueComponent介绍

关于Vuecomponent：

1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的: new VueComponent(options).
3.特别注意:每次调用Vue.extend，返回的都是一个全新的VueComponent

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VueComponent</title>
</head>
<body>

    <div id="root">
        <school></school>
    </div>
    
    <script src="./js/vue.js"></script>
    <script>
        Vue.config.productionTip = false;

        const school = Vue.extend({
            template:`
            <div>
           <div>学校：{{schoolName}}</div>
           <div>地址：{{schoolAddress}}</div>
           </div>
           `,

           data() {
               return {
                schoolName:"尚硅谷",
                schoolAddress:"北京"
               }
           },
        })

        const school1 = Vue.extend({
            template:`
            <div>
           <div>学校：{{schoolName}}</div>
           <div>地址：{{schoolAddress}}</div>
           </div>
           `,

           data() {
               return {
                schoolName:"尚硅谷",
                schoolAddress:"北京"
               }
           },
        })

        //输出school组件
        console.log(school);
        console.log(school === school1);

        new Vue({
            el:"#root",
            components:{
                school
            }
        })
    </script>
</body>
</html>

页面展示&控制台输出：

二、关于this指向

(1).组件配置中（Vue.extend）:
data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】

(2).new Vue()配置中:
data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【vue实例对象】。

三、一个重要的内置关系（VueComponent.prototype.proto===Vue.prototype）

VueComponent.prototype.__proto__===Vue.prototype ,这么做是为了让组件实例对象vc可以访问到Vue原型上的属性方法，已达到复用，因为Vue和VueComponent在很大程度上都是相同的（95%），所以像$mount和$watch方法，定义在Vue的原型对象上，然后VueComponent的原型对象的原型对象指向Vue的原型对象，VueComponent和Vue的实例就可以使用同一份方法和属性，而不用写两份一样的。

在Vue.js中，每个Vue组件都是Vue的实例，而Vue的实例原型是Vue.prototype。因此，在Vue.js中，VueComponent.prototype的__proto__属性指向Vue.prototype，这是Vue组件实例与Vue原型之间的内置关系。

简而言之，VueComponent.prototype.proto === Vue.prototype 表示Vue组件实例的原型链中的原型指向Vue的原型。这种关系使得Vue组件实例能够继承Vue的属性和方法，并且能够直接访问Vue原型上的一些特性。

通过这种关系，Vue组件实例可以访问Vue原型上的全局方法、属性和指令，以及Vue实例上的实例方法、生命周期钩子等。同时，它也说明了Vue的原型是Vue组件实例的原型链上的一个环节，使得组件能够拥有和使用Vue的核心功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个重要的内置对象</title>
</head>
<body>
    

    <script src="./js/vue.js"></script>
    <script>
        Vue.config.productionTip = false;

        const school = Vue.extend({
           template:`
           <div>
           <div>学校：{{schoolName}}</div>
           <div>地址：{{schoolAddress}}</div>
           </div>
           `,
           data() {
               return {
                schoolName:"尚硅谷",
                schoolAddress:"北京"
               }
           },
        })

        console.log(school.prototype.__proto__ === Vue.prototype);
    </script>

</body>
</html>

结果：