Vue 3.0 應(yīng)用&組件實(shí)例

#創(chuàng)建一個(gè)應(yīng)用實(shí)例

每個(gè) Vue 應(yīng)用都是通過(guò)用 createApp 函數(shù)創(chuàng)建一個(gè)新的應(yīng)用實(shí)例開(kāi)始的：

const app = Vue.createApp({ /* 選項(xiàng) */ })

該應(yīng)用實(shí)例是用來(lái)在應(yīng)用中注冊(cè)“全局”組件的。我們將在后面的指南中詳細(xì)討論，簡(jiǎn)單的例子：

const app = Vue.createApp({})
app.component('SearchInput', SearchInputComponent)
app.directive('focus', FocusDirective)
app.use(LocalePlugin)

應(yīng)用實(shí)例暴露的大多數(shù)方法都會(huì)返回該同一實(shí)例，允許鏈?zhǔn)剑?/p>

Vue.createApp({})
  .component('SearchInput', SearchInputComponent)
  .directive('focus', FocusDirective)
  .use(LocalePlugin)

你可以在 API 參考 中瀏覽完整的應(yīng)用 API。

#根組件

傳遞給 createApp 的選項(xiàng)用于配置根組件。當(dāng)我們掛載應(yīng)用時(shí)，該組件被用作渲染的起點(diǎn)。

一個(gè)應(yīng)用需要被掛載到一個(gè) DOM 元素中。例如，如果我們想把一個(gè) Vue 應(yīng)用掛載到 <div id="app"></div>，我們應(yīng)該傳遞 #app：

const RootComponent = { /* 選項(xiàng) */ }
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

與大多數(shù)應(yīng)用方法不同的是，mount 不返回應(yīng)用本身。相反，它返回的是根組件實(shí)例。

雖然沒(méi)有完全遵循 MVVM 模型_blank_nofollow，但是 Vue 的設(shè)計(jì)也受到了它的啟發(fā)。因此在文檔中經(jīng)常會(huì)使用 vm (ViewModel 的縮寫) 這個(gè)變量名表示組件實(shí)例。

盡管本頁(yè)面上的所有示例都只需要一個(gè)單一的組件就可以，但是大多數(shù)的真實(shí)應(yīng)用都是被組織成一個(gè)嵌套的、可重用的組件樹(shù)。舉個(gè)例子，一個(gè) todo 應(yīng)用組件樹(shù)可能是這樣的：

Root Component
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

每個(gè)組件將有自己的組件實(shí)例 vm。對(duì)于一些組件，如 TodoItem，在任何時(shí)候都可能有多個(gè)實(shí)例渲染。這個(gè)應(yīng)用中的所有組件實(shí)例將共享同一個(gè)應(yīng)用實(shí)例。

我們會(huì)在稍后的組件系統(tǒng)章節(jié)具體展開(kāi)。不過(guò)現(xiàn)在，你只需要明白根組件與其他組件沒(méi)什么不同，配置選項(xiàng)是一樣的，所對(duì)應(yīng)的組件實(shí)例行為也是一樣的。

#組件實(shí)例 property

在前面的指南中，我們認(rèn)識(shí)了 data property。在 data 中定義的 property 是通過(guò)組件實(shí)例暴露的：

const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})


const vm = app.mount('#app')


console.log(vm.count) // => 4

還有各種其他的組件選項(xiàng)，可以將用戶定義的 property 添加到組件實(shí)例中，例如 methods，props，computed，inject 和 setup。我們將在后面的指南中深入討論它們。組件實(shí)例的所有 property，無(wú)論如何定義，都可以在組件的模板中訪問(wèn)。

Vue 還通過(guò)組件實(shí)例暴露了一些內(nèi)置 property，如 $attrs 和 $emit。這些 property 都有一個(gè) $ 前綴，以避免與用戶定義的 property 名沖突。

#生命周期鉤子

每個(gè)組件在被創(chuàng)建時(shí)都要經(jīng)過(guò)一系列的初始化過(guò)程——例如，需要設(shè)置數(shù)據(jù)監(jiān)聽(tīng)、編譯模板、將實(shí)例掛載到 DOM 并在數(shù)據(jù)變化時(shí)更新 DOM 等。同時(shí)在這個(gè)過(guò)程中也會(huì)運(yùn)行一些叫做生命周期鉤子的函數(shù)，這給了用戶在不同階段添加自己的代碼的機(jī)會(huì)。

比如 created 鉤子可以用來(lái)在一個(gè)實(shí)例被創(chuàng)建之后執(zhí)行代碼：

Vue.createApp({
  data() {
    return { count: 1}
  },
  created() {
    // `this` 指向 vm 實(shí)例
    console.log('count is: ' + this.count) // => "count is: 1"
  }
})

也有一些其它的鉤子，在實(shí)例生命周期的不同階段被調(diào)用，如 mounted、updated 和 unmounted。生命周期鉤子的 this 上下文指向調(diào)用它的當(dāng)前活動(dòng)實(shí)例。

TIP

不要在選項(xiàng) property 或回調(diào)上使用箭頭函數(shù)，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因?yàn)榧^函數(shù)并沒(méi)有 this，this 會(huì)作為變量一直向上級(jí)詞法作用域查找，直至找到為止，經(jīng)常導(dǎo)致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之類的錯(cuò)誤。

#生命周期圖示

下圖展示了實(shí)例的生命周期。你不需要立馬弄明白所有的東西，不過(guò)隨著你的不斷學(xué)習(xí)和使用，它的參考價(jià)值會(huì)越來(lái)越高。