Vue中的級(jí)別可以分為三層，分別是組件級(jí)別，實(shí)例級(jí)別和全局級(jí)別。每一級(jí)別都有著不同的作用和適用范圍。

組件級(jí)別

組件級(jí)別是Vue中最低的級(jí)別，所有的Vue組件都屬于這個(gè)級(jí)別。在這個(gè)級(jí)別中，組件可以接受父組件傳遞的數(shù)據(jù) props，也可以在自己組件的內(nèi)部使用 data 來定義私有數(shù)據(jù)。組件中也可以使用 methods 來定義私有方法。在組件中還可以使用計(jì)算屬性 computed 和監(jiān)聽器 watch 來對(duì)數(shù)據(jù)進(jìn)行處理和響應(yīng)式更新。完成組件的定義后，需要使用 Vue.component('組件名稱', 組件) 注冊(cè)組件。

<template>
<div>
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</div>
</template>
<script>
export default {
name: 'MyComponent',
props: {
title: String,
content: String
},
data() {
return {
internalData: 'Some text'
}
},
methods: {
internalMethod() {
console.log('Internal method called')
}
},
computed: {
computedData() {
return this.internalData.toUpperCase()
}
},
watch: {
title(value) {
console.log(`Title updated to ${value}`)
}
}
}
</script>

實(shí)例級(jí)別

實(shí)例級(jí)別是介于組件級(jí)別和全局級(jí)別之間的一個(gè)級(jí)別。在這個(gè)級(jí)別中，可以創(chuàng)建一個(gè)根 Vue 實(shí)例，在實(shí)例中定義一些全局的數(shù)據(jù)和方法，同時(shí)也可以控制全局的行為，比如路由控制和插件使用。在實(shí)例中還可以通過 $emit 和 $on 來進(jìn)行組件間通信。Vue實(shí)例可以用來渲染一個(gè)單頁面應(yīng)用程序或者一部分應(yīng)用程序。

<template>
<MyComponent :title="title" :content="content" />
</template>
<script>
import MyComponent from '@/components/MyComponent.vue'
export default {
components: {
MyComponent
},
data() {
return {
title: 'Hello World',
content: 'Lorem ipsum dolor sit amet.'
}
},
methods: {
globalMethod() {
console.log('Global method called')
}
}
}
</script>

全局級(jí)別

全局級(jí)別是Vue中最高的級(jí)別，它可以在整個(gè)應(yīng)用程序中定義全局的指令、過濾器、混入和組件。在這個(gè)級(jí)別中，Vue實(shí)例不再是單一的，而是分為多個(gè)實(shí)例。如果需要在全局級(jí)別中注冊(cè)組件，需要使用 Vue.component('組件名稱', 組件)。同樣的，如果需要在全局級(jí)別中注冊(cè)混入或者指令，也需要通過 Vue.mixin 或者 Vue.directive 來實(shí)現(xiàn)。

// 全局注冊(cè)組件
Vue.component('MyComponent', {
// ...
})
// 全局注冊(cè)混入
Vue.mixin({
// ...
})
// 全局注冊(cè)自定義指令
Vue.directive('my-directive', {
// ...
})