相对Vue里的组件理解更加深入,而且想要你后期想要源码分析的时候压力没那么大;那就必须要学学VueComponent

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>VueComponent构造函数</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <school></school>
        </div>
    </body>
    <script src="indexJS.js"></script>
</html>

Vue.config.productionTip = false

const school = Vue.extend({
    template:`
        <div>
            <h2>学校名称:{{name}}</h2>
            <h2>学校地址:{{address}}</h2>
        </div>
    `,
    data(){
        return{
            name: 'bilibili',
            address: '魔都'
        }
    }
})

new Vue({
    el: '#root',
    components:{school}
})

研究透一个组件后其他组件都是一样的道理

我们输出一下school

console.log(school)

@ ƒ VueComponent (options) {
        this._init(options);
      }

不是数组不是一般对象，本质就是个构造函数

VueComponent不仅被调用了,还是new关键字调用的

每次调用`Vue.extend`.返回的都是一个全新的VueComponent!!

const hello = Vue.extend({
    template:`<h2>{{msg}}</h2>`,
    data(){
        return{
            msg:'你好啊!'
        }
    }
})
console.log('@',school)
console.log('#',hello)

@ ƒ VueComponent (options) {
        this._init(options);
      }
# ƒ VueComponent (options) {
        this._init(options);
      }

看似同样实则不一样

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

@ false

school.a = 100
console.log('school.a=',school.a,'hello.a=',hello.a)

school.a= 100 hello.a= undefined

上源码里面搜:

Vue.extend = function (extendOptions) {
      /*......*/

      var Sub = function VueComponent (options) {
        this._init(options);
      };
      /*........*/
      return Sub
    };

只要你一调用Vue.extend它就给你创建里面这一个变量(Sub)
Sub的值是

var Sub = function VueComponent (options) {
  this._init(options);
};

它return了Sub
都是现定义VueComponent然后给你返回的;不是共用一个VueComponent
VueComponent也有数据代理

输出的是VueComponent的实例对象,只不过这个实例对象跟vm长得一模一样

里面的data里的数据都数据代理到了VueComponent身上,而且extend()里面的this指的就是VueComponent,VueComponent可以简称为vc这个vc和vm功能是一样的

const vm = new Vue({
    el: '#root',
    components:{
        school,
        hello
    }
})

> vm
< Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
    $attrs: (...)
    $children: Array(2)
        0: VueComponent {_uid: 1, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
        1: VueComponent {_uid: 2, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
        length: 2

总结

关于VueComponent:
1.school组件本质是一个名为VueComponent(options)。且不是程序员定义的,是Vue.extend生成的。
2.我们只需要写<school/>或<school></school>.Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的: new VueComponent(options)
3.特别注意:每次调用Vue.extend.返回的都是一个全新的VueComponent!!
4.关于this指向:
(1).组件配置中:
data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】。
(2).new Vue()配置中:
data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】
**5.VueComponent的实例对象,以后简称vc(也可称为:组件实例对象)��methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】。
(2).new Vue()配置中:
data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】
**5.VueComponent的实例对象,以后简称vc(也可称为:组件实例对象)中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】。
(2).new Vue()配置中:
data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】
**5.VueComponent的实例对象,以后简称vc(也可称为:组件实例对象)**�vc(也可称为:组件实例对象)�为:组件实例对象)

Vue2.0 Vue 组件 非单文件文件组件 VueComponent构造函数

每次调用Vue.extend.返回的都是一个全新的VueComponent!!

总结

Vue2.0 Vue 组件非单文件文件组件 VueComponent构造函数

每次调用`Vue.extend`.返回的都是一个全新的VueComponent!!