vuejs中实例和组件的区别是什么

区别：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: &#39;<App/>&#39;,//此处引根组件
})

而App.vue代码中

d477f9ce7bf77f53fbcf36bec1b69b7a
  ab509c080ec9f7ec77efedb1cdcd4bed
       2077a3dd4ed9221ecc36c7df31f3ca5dwelcome! {{name}}, you are {{age}} years old16b28748ea4df4d9c2150843fecfba68
    99ae171a883fff6fa2f384572360bc0a
  16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
  name: 'App',
  data:function(){
    return {
      name:'wangyue',
      age:'25'
    }
  },
  }
2cacc6d41bbb37262a98f745aa00fbf0

c9ccee2e6ea535a969eb3f532ad9fe89
  .welcome{
    font-size: 32px;
    color: blueviolet;
  }
531ac245ce3e4fe3d50054a55f265927

效果图如下，紫色文字之下的可以忽略不看，这里是我路由展示的内容。

放大比较一下

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中实例和组件的区别是什么的详细内容。更多信息请关注PHP中文网其他相关文章！