02、Vue.js 3 —— app應用 與 vm組件實例

每個 Vue 應用都是通過用 createApp 函數創建一個新的 應用實例 開始的：

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

該應用實例app是用來在應用中注冊“全局”組件的，例如（先看如下demo，后面講解）：

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

鏈式：應用實例app中暴露的大多數方法都會返回該同一實例（除了mount），這樣就可以用鏈式操作了：

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

 

根組件

傳遞給 createApp 的選項用於配置根組件。當我們 mount掛載 應用時，該組件被用作渲染的起點：

// 這個是配置 根組件 的選項，即：只要是傳遞給 createApp 的參數的實例，就是在配置根組件
const RootComponent = { 
  /* 選項 */ 
}
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')    // app應用需要被掛載到一個 DOM 元素中

注意：mount 不返回應用本身。相反，它返回的是 根組件實例。

在文檔中經常會使用 vm (ViewModel 的縮寫) 這個變量名表示 組件實例；

 

組件樹：大多數的真實應用都是被組織成一個嵌套的、可重用的組件樹，如下：

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

每個組件將有自己的組件實例 vm

你要明白：根組件 與 其他組件 沒什么不同，配置選項是一樣的，所對應的組件實例行為也是一樣的。

 

組件實例 —— 屬性property

在 data 中定義的 property （這里說的 property 是下面代碼的 count）是通過 組件實例 暴露的：

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

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

console.log(vm.count) // => 4  通過組件實例vm 暴露出 count

 可以將用戶定義的 property 添加到 組件實例 中，即：除了data，還有例如 methods，props，computed，inject 和 setup 等這些 property；

組件實例 的所有 property，無論如何定義，都可以在組件的模板中訪問。

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

 

生命周期 鈎子

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

比如 created 鈎子可以用來在一個實例被創建之后執行代碼：

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

 除了 created 這個鈎子，還有一些其它的鈎子，在實例生命周期的不同階段被調用，如 mounted、updated 和 unmounted。生命周期鈎子的 this 上下文指向調用它的當前活動實例。

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

 

下圖展示了實例的生命周期。我們不需要立馬弄明白所有的東西，不過隨着不斷學習和使用，它的參考價值會越來越高，學完Vue后一定要熟透該圖：

 

下一章：模板語法