Detailed explanation of the relationship between Vue and VueComponent

The following case reviews the knowledge points of the prototype chain we learned before

       // Define a constructor function Demo() {
            this.a = 1
            this.b = 2
        }
        //Create a Demo instance object const d = new Demo()
        console.log(Demo.prototype); //Display prototype properties console.log(d.__proto__); //Implicit prototype properties console.log(Demo.prototype === d.__proto__); //true
        //The programmer operates the prototype object by displaying the prototype attributes and appending an x attribute with a value of 99
        Demo.prototype.x = 99
        console.log('@',d.__proto__.x);

Analyze VueComponent according to the following component

<body>
    <div id="root">
         <school></school>
    </div>
    <script>
        Vue.config.productionTip = false
        //Define the school component const school = Vue.extend({
            name: 'school',
            template: `
              <div>
                <h2>School name: {{name}}</h2>
                <h2>School address: {{address}}</h2>
              </div>
            `,
            data() {
                return {
                    name: 'Shang Silicon Valley',
                    address: 'Beijing'
                }
            }   
        })
        //Create Vue
        new Vue({
            el:'#root',
            components:{
                school,
            }
        })
    </script>
</body>

1. The school component is essentially a constructor called VueComponent , and it is not defined by the programmer, but generated by Vue.extend

2. We only need to write <school/> or <school</school>, and Vue will help us create an instance object of the school component when parsing; that is, Vue helps us execute: new VueComponent(options)

3. Special note: Every time Vue.extend is called, a new VueComponent is returned

4. About this pointing:

In component configuration: data functions, functions in methods , functions in watch , functions in computed , their this are all VueComponent instance objects
In new Vue(options) configuration: data functions, functions in methods , functions in watch , functions in computed , their this are all Vue instance objects

5. VueComponent instance object, hereinafter referred to as vc ---- component instance object

Key Points

An important built-in relationship: VueComponent.prototype._proto_===Vue.prototype
Why is this relationship necessary: to allow the component instance object vc to access the properties and methods on the Vue prototype

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

Vue built-in component component--dynamically render component operations through the is attribute
Vue.component property description
vue dynamic component
Vue components dynamic components detailed explanation
Solve the component tag rendering problem of Vue

<<: Interaction in web design: A brief discussion on paging issues

>>: A brief discussion on the difference between MYSQL primary key constraint and unique constraint