[Vue] Detail the difference between instances and components in Vue, and compare the codes

The difference between instances and components in Vue is as follows:

1. Instance is the basic concept of Vue, representing a root instance of Vue. Only one root instance can exist in the page; while component is based on the concept of instance, which can correspond to one or more instances and split the page into multiple independent parts.

2. Instances can be mounted and rendered directly under the root node, but components need to be registered in the instance before they can be used.

3. The data of both the instance and the component can be defined through the data option, but the data of the instance must be an object, and the data of the component must be a function that returns an object.

4. Instance methods and life cycle hooks are defined in the instance, while component methods and life cycle hooks need to be defined in the component options.

5. The communication methods between instances and components are also different. Event communication can be carried out between instances through $emit and $on, while communication between parent and child components can be carried out between components through props and $emit.

In short, instances are the starting point of Vue applications, and components are an important part of Vue applications. Instances are relatively simple and straightforward to use, while components can help us better manage and organize our applications.

Here are code examples of Vue instances and components, and their differences:

1. Vue instance example:

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    greet() {
      alert(this.message);
    }
  },
  created() {
    console.log('Vue实例已创建');
  }
});

    2.Vue component example:

const Greeter = {
  props: ['message'],
  template: '<div>{
    
    { message }}</div>',
  created() {
    console.log('组件已创建');
  }
};

In the above example, we can see the following differences:

• Vue instances are new Vue()created using methods, while Vue components Vue.component()are created using methods.
• Vue instances use eloptions to mount and render, while Vue components need to be registered in the instance and then called using component tags in the template.
• The methods and created lifecycle hooks in the Vue instance are defined directly in the instance, while the methods and created lifecycle hooks of the Vue component need to be defined in the component options.
• The data option of a Vue component must be a function that returns a data object, and the data option of a Vue instance must be an object.
• Vue instances can directly use $emitand $onmethods for event communication, while Vue components can only $emitcommunicate between parent and child components through props and methods.

The following is sample code for a Vue component to be registered and used in an instance:

const app = new Vue({
  el: '#app',
  components: {
    Greeter
  },
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    greet() {
      alert(this.message);
    }
  },
  created() {
    console.log('Vue实例已创建');
  },
  template: `
    <div>
      <greeter :message="message" @greet="greet"></greeter>
    </div>
  `
});

<greeter>Use tags in the template to call the component. messageThe properties are passed to the component as props of the component. @greetThe event listens to the button click event in the component and calls greetthe method in the Vue instance.