Vue组件化之VueComponent介绍

简介这篇文章主要介绍的是VueComponent函数。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>V

我会努力变强的

13603人浏览 · 2022-02-14 01:47:36

我会努力变强的 · 2022-02-14 01:47:36 发布

简介

这篇文章主要介绍的是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>

效果：
Y5by655qE,size_17,color_FFFFFF,t_70,g_se,x_16)

第一个结论：
组件的本质是一个名为VueComponent的构造函数，并且不是程序员定义的，而是Vue.extend函数生成的。

并且每次生成的都是不一样的VueComponent的构造函数。

第二个结论：
每当我们使用主键（写组件标签时，<school></school>）,vue解析到组件标签时，会帮我们使用VueComponent构造函数创建一个VueComponent对象，帮我们执行 new VueComponent(options)

验证：
修改vue.js文件的源码，找到这一段，加上一段代码：
在这里插入图片描述
效果：

第三个结论：this的指向：
在组件配置中：
data函数，methods中配置的函数，watch中配置的函数，computed中配置的函数的this指向的都是VueComponent组件对象。
在vue实例配置中：
data函数，methods中配置的函数，watch中配置的函数，computed中配置的函数的this指向的都是vue对象。

在这里插入图片描述
效果：

Vue实例对象简称vm，VueComponent实例对象简称vc。

一个重要的内置关系：
VueComponent.prototype.__proto__===Vue.prototype ,这么做是为了让组件实例对象vc可以访问到Vue原型上的属性方法，已达到复用，因为Vue和VueComponent在很大程度上都是相同的（95%），所以像$mount和$watch方法，定义在Vue的原型对象上，然后VueComponent的原型对象的原型对象指向Vue的原型对象，VueComponent和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>