Vue学习：vc和vm的原型链关系

一个重要的内置关系：VueComponent.prototype.__proto__===Vue.prototype

为什么有这种关系：为了让组件实例对象vc可以访问到Vue原型链上的属性、方法

回顾原型链:显示原型和隐式原型

    //定义的构造函数
    function Demo() {
        this.a = 1
        this.b = 2
    }
    //创建Demo的实例对象
    const d = new Demo()
    console.log(Demo.prototype)//显示原型
    console.log(d.__proto__)//和上面的一样
    console.log(Demo.prototype===d.__proto__)
    //程序原通过显示原型操作原型对象追加属性
    Demo.prototype.x=99
    console.log('隐式原型可以拿到',d.__proto__.x,'直接写：',d.x)
    console.log('d是Demo实例对象',d)
 

调用Vue.extend返回就是VueComponent实例对象

    const school = Vue.extend({
        name: 'school',//开发者工具的显示
        template: `
        <div>
            <h2>学校名称：{{schoolName}}</h2>
            <h2>学校地址：{{adress}}</h2> 
            <button @click="showX">点击提示学校名</button >
        </div>
        `,//结构
        data() {
            return {//防止相同对象改变
                schoolName: 'xxxx学校',
                adress: 'xxx街道',
            }
        },//数据
        methods: {
            showX(){
                console.log('组件实例对象',this)
            }
        },

    })

    console.log(school.prototype.__proto__ === Vue.prototype)

    console.log(Object.prototype === school.prototype.__proto__)//被改了
    console.log(Object.prototype === Vue.prototype.__proto__)

    console.log(school.prototype.__proto__.__proto__ === Object.prototype)
    console.log(school.prototype.__proto__ === Vue.prototype)

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


        }

    });