区别：1、实例有el挂载点，组件没有。2、实例中是“data:{}”，组件中是“data(){return{}}”。3、vue实例的html元素是直接渲染到页面中的；而组件的html元素是定义在template上，通过调用再渲染到页面中的。
本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。
上次写vue单组件项和路由的时候，想到一个问题。new Vue({…})是一个Vue实例，那么组件是Vue实例吗？
分析
之前说了，有两种开发方式。一个是基于浏览器的（即直接在script中引入main.js），还有一个是vue-cli搭建出来的基于命令行的开发方式（一个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.vue代码中
export default { name: 'App', data:function(){ return { name:'wangyue', age:'25' } }, } .welcome{ font-size: 32px; color: blueviolet; }welcome! {{name}}, you are {{age}} years old
登录后复制
效果图如下，紫色文字之下的可以忽略不看，这里是我路由展示的内容。
放大比较一下
vuejs中实例和组件的区别
组件的data是一个function非组件是data:{}，组件没有el挂载点这个选项。按官网来说，组件是可复用的 Vue 实例，且带有一个名字。
在vue项目中，一般只有一个VUE实例在main.js中定义，其他都是vue组件实例。其实都是vue实例，但为了方便区分，我就这么说了。根组件之外，components中还有很多小组件。
即：
1、vue实例有el指定挂载元素，组件没有，因为组件也是通过调用在渲染页面，直接通过调用组件名渲染；
2、实例和组件的data属性形式不同
vue实例中data属性：data:{“name”:“aa”,“age”:18},
组件中的data属性：data(){ return{“name”:“aa”,“age”:18} },
3、vue实例的html元素是直接渲染到页面中，而组件的html元素是定义在template上，通过调用再渲染到页面
相关推荐：《vue.js教程》
以上就是vuejs中实例和组件的区别是什么的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2946619.html
