29vue中一个重要的关系

vue中一个重要的关系

prototype：显式链， 函数使用

__ proto __: 隐式链，对象实例使用

Vue.prototype === VueComponent.prototype.__proto__
总结：
	Vue.prototype === vm.__proto__ === VueComponent.prototype.__proto__ === VueComponentInstance.__proto__.proto__

1.一个重要的内置关系: VueComponent. prototype._proto_ == Vue.prototype
2.为什么要有这个关系: 让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

实例

<div id="root"></div>
<script>
    Vue.config.productionTip = false;


    // VueComponent
    const school = Vue.extend({
        template: `
        <div>
            <h3>{{name}}</h3>
            <h3>{{address}}</h3>
        </div>
        `,
        data() {
            return {
                name: 'Redskaber',
                address: 'HNIUWC'
            }
        },
    });

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


    // Vue 与 VueComponet
    console.log('school.prototype.__proto__ === Vue.prototype :', school.prototype.__proto__ === Vue.prototype);
    Vue.prototype.valueA = 100;
    console.log(' Vue.prototype.valueA = 100;\nschool.prototype.__proto__.valueA:', school.prototype.__proto__.valueA)


</script>