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

每個 Vue 應(yīng)用都是通過用 createApp 函數(shù)創(chuàng)建一個新的應(yīng)用實例開始的：

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

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

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

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

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

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

#根組件

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

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

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

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

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

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

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

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

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

#組件實例 property

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

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


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


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

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

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

#生命周期鉤子

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

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

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

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

TIP

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

#生命周期圖示

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