區別：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/>',//此处引根组件
})而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>效果圖如下，紫色文字之下的可以忽略不看，這裡是我路由展示的內容。 
放大比較一下
#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中文網其他相關文章！
