Comments

vueComponet的分析

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

​ 2.我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，
​ 即Vue帮我们执行的：new VueComponent(options)。
​ 当我们书写或 时，vue会自动解析并帮我们调用new VueComponet(options)创建出一个新的实例
​ 3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

​ —-> 验证过程如下

​ 4.关于this指向：
​ (1).组件配置中：
​ data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
​ (2).new Vue(options)配置中：
​ data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
​ 5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
​ Vue的实例对象，以后简称vm。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<body>
    <div id="root">

        <school></school>

    </div>
</body>
<script>
    Vue.config.productionTip = false;
    var school=Vue.extend({
        name:"school",
        template:`
        <div>
        <h1>school</h1>
        </div>`,
        data(){
            return{
                hello:"hello"
            }
        }
    })
    var student=Vue.extend({
        name:"student",
        data(){
            return{
                hello:"hello"
            }
        }
    })
    
    
    这里为验证过程
    // 验证两个vuecomponent
    // 方式一 直接判断
    // console.log(student==school); -->false
    // 
    //方式二往school上添加东西,如果school和student是同一个东西,那student上也会有
    // 结果为undefined
    // school.a=99
    // console.log(school.a,student.a); 
    //             --> 99 undefined
    // 方式三查看源码

    
    /* 
``      Vue.extend=function(extendOptions){
    ……
    var Sub =function vueComponet (options){
        this._init(options);
        //这里每次调用vuecomponent时，就会创建一个sub函数变量，并且返回该函数变量
        //每一次调用时，sub都是现定义的
        //固
        //
        //每次调用vue.extend时，都会生成一个新的vuecompont的构造器函数
    }
    ……
    return Sub;
}
*/
console.log(student);
    var vm=new Vue({
        el:'#root',
        components:{school,student}
    })

jhfutureWeb Developer & Designer

一个记录技术分享的网站。