Vue学习第10天——VueComponent与Vue之间的关系

1、VueComponent组件使用步骤

    <div id="app">
        <!-- 3.使用组件 -->
        <school/>
    </div>
    <script>
        //1.定义子组件
        //school本质是VueComponent构造函数
        const school = Vue.extend({
            template: `<h3>{{name}}</h3>`,
            
            data() {
                return {
                    name: '憨瓜'
                }
            }
        })

        console.log(school.prototype__proto__ == Vue.prototype); //true
        new Vue({
            el: "#app",
            //2.注册组件
            components: {
                school
            }
        })
    </script>

1、VueComponent构造函数如何生成？——通过Vue.extend生成的
2、data必须写成函数，why？——避免组件被复用时，存在数据引用关系
3、我们只需要写<school/>组件标签即可，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行new VueComponent()
4、每次调用Vue.extend都会返回一个全新的VueComponent
5、组件中的data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是VueComponent实例对象

2、 复习原型链相关知识

    <script>
        //定义一个构造函数
        function Demo() {
            var a = 1;
            var b = 2
        }

        //通过new Demo创建一个实例
        var c = new Demo();
        console.log(Demo.prototype); //Demo的显示原型属性（Demo的原型对象）
        console.log(c.__proto__); //实例对象的隐式原型属性
        console.log(c.__proto__ == Demo.prototype) //true

        //结论：实例的隐式原型属性永远指向自己缔造者的原型对象
    </script>

结论：实例的隐式原型属性永远指向自己缔造者的原型对象

3、根据原型链分析VueComponent与Vue之间的关系

说明：本来图中的黄色线应该指向Object的原型对象上，但是Vue帮我们把这个线指向了Vue的原型对象，这样做的目的是：让组件实例对象能够访问到Vue原型对象上的方法和属性。
结论：VueComponent.protype.__proto__ === Vue.prototype