Vue组件深入

1. Vue组件即VueComponent：

比如school组件本质就是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
我们只需要写, Vue解析时会帮我们创建school组件的实例对象。也就是Vue帮我们执行的： new VueComponent(options)
特别注意：每次调用Vue.extend, 返回的都是一个全新的VueComponent函数！！！不是VueComponent对象实例(可以查看源码)
关于this的指向：

在组件配置中： data函数、methods中的函数，watch中的函数、computed中的函数, 他们的this指向都是VueComponents实例对象
在new Vue()配置中：data函数、methods中的函数，watch中的函数、computed中的函数, 他们的this指向均是Vue实例对象

VueComponent的实例对象，以后简称vc(也可称之为组件实例对象)。Vue实例对象简称vm

html

<div id="root">
<school></school>
<student></student>
</div>
</body>
<script>
    Vue.config.productionTip=false
    let student = Vue.extend({
        name:'student',
        template: `
          <div>
              <span>{{studentName}}</span>
              <span>{{studentAddress}}</span>
          </div> `,
        data(){
            return{
                studentName:'未知名考生',
                studentAddress:'四川成都'
            }
        }
    })
    let school = Vue.extend({
        name:'school',
        template: `
            <span>{{schoolName}}</span>
        `,
        data(){
            return{
                schoolName:'清华'
            }
        }
    })
    console.log("school", school)
    console.log("student", student)
    // 不同的组件之间都是全新的VueComponent函数,不是共用一个
    console.log("是否一个实例", student===school)

    new Vue({
        el:'#root',
        components:{
            school, student
        },
    })
</script>

控制台输出： Alt text

2. Vue和VueComponent关系

vc和vm的配置options的区别是vc的data必须是函数，vm里面必须有el配置项或者vm需要调用$mounted() 他们之间的关系： Alt text Vue的显示原型对象和VueComponent的显示原型对象或者VueComponent实例对象的隐示原型对象的隐示原型对象是一个东西：对象类含有prototype属性称为显示原型对象, 对象实例的__proto__称为隐示原型对象这样子设计目的是：让组件实例对象vc可以访问到Vue原型上的属性、方法

html

<body>
<div id="root">
<school></school>
</div>
</body>
<script>
    Vue.config.productionTip=false
    const school = Vue.extend({
        name:'school',
        template: `
            <span>{{schoolName}}</span>
        `,
        data(){
            return{
                schoolName:'清华'
            }
        }
    })
    console.log("@", school.prototype.__proto__===Vue.prototype)

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

控制台输出： Alt text

Vue组件深入 ​

1. Vue组件即VueComponent： ​

2. Vue和VueComponent关系 ​

Vue组件深入

1. Vue组件即VueComponent：

2. Vue和VueComponent关系