vue实例和组件的区别

引言

上次写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中还有很多小组件。