What is the difference between instances and components in vuejs

Difference: 1. The instance has an el mount point, but the component does not. 2. In the instance, it is "data:{}", and in the component, it is "data(){return{}}". 3. The html elements of the vue instance are directly rendered into the page; while the html elements of the component are defined on the template and then rendered into the page through calls.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

When I wrote vue single component items and routing last time, I thought of a problem. new Vue({…}) is a Vue instance, so is the component a Vue instance?

Analysis

As mentioned before, there are two development methods. One is browser-based (that is, main.js is introduced directly into the script), and the other is a command line-based development method built by vue-cli (a vue project).

Because the actual project is large Part of it uses the command line development method, so we still talk about components in the command line development method.

In the main.js of the project

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({//这里就是一个vue实例
  el: '#app',//el挂载点
  router,
  components: { App },
  template: &#39;<App/>&#39;,//此处引根组件
})

And in the App.vue code

<template>
  <div id="app">
       <div class="welcome">welcome! {{name}}, you are {{age}} years old</div>
    <router-view/>
  </div>
</template>
<script>
export default {
  name: &#39;App&#39;,
  data:function(){
    return {
      name:&#39;wangyue&#39;,
      age:&#39;25&#39;
    }
  },
  }
</script>

<style>
  .welcome{
    font-size: 32px;
    color: blueviolet;
  }
</style>

The renderings are as follows, you can ignore the ones under the purple text, here It is the content displayed by my route.

Enlarge and compare

##The difference between instances and components in vuejs

The data of the component is a function and the non-component is data:{},

The component does not have the el mount point option. According to the official website, components are reusable Vue instances with a name.

In a vue project, generally there is only one VUE instance defined in main.js, and the others are vue component instances. In fact, they are all Vue instances, but for the convenience of differentiation, I just said that. In addition to the root component, there are many small components in components.

That is:

1. The vue instance has el to specify the mounting element, but the component does not, because the component is also called on the rendering page and rendered directly by calling the component name;

2. The data attribute forms of instances and components are different.

The data attribute in the vue instance: data:{"name":"aa","age":18},

data in the component Attributes: data(){ return{"name":"aa","age":18}},

3. The html element of the vue instance is directly rendered into the page, while the html element of the component is Defined on the template, it is rendered to the page by calling it

Related recommendations: "

vue.js Tutorial"

The above is the detailed content of What is the difference between instances and components in vuejs. For more information, please follow other related articles on the PHP Chinese website!