vue实例和组件的区别_vue根实例和组件实例有什么区别-CSDN博客

本文链接：https://blog.csdn.net/qq_33712668/article/details/90481940

博客围绕Vue实例与组件展开分析。提出组件是否为Vue实例的问题，介绍了基于浏览器和命令行两种开发方式，着重分析命令行开发方式里的组件。指出组件的data是函数、无el挂载点，项目中一般只有一个Vue实例，其他为组件实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引言

上次写vue单组件项和路由的时候，想到一个问题。new Vue({…})是一个Vue实例，那么组件是Vue实例吗？

分析

之前说了，有两种开发方式。一个是基于浏览器的（即直接在script中引入main.js），还有一个是vue-cli搭建出来的基于命令行的开发方式（一个vue项目），具体见vue单组件与路由
因为实际项目大部分都用命令行开发方式，所以还是说命令行开发方式里的组件。
在项目的main.js

// 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: '<App/>',//此处引根组件
})

而App.vue代码中

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

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

效果图如下，紫色文字之下的可以忽略不看，这里是我路由展示的内容。
在这里插入图片描述
放大比较一下

区别就是：
组件的data是一个function非组件是data:{}，组件没有el挂载点这个选项。按官网来说，组件是可复用的 Vue 实例，且带有一个名字。
在vue项目中，一般只有一个VUE实例在main.js中定义，其他都是vue组件实例。其实都是vue实例，但为了方便区分，我就这么说了。根组件之外，components中还有很多小组件。