vue學習——應用 & 組件實例

官網：https://v3.cn.vuejs.org/guide/instance.html

創建一個應用實例

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

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

該應用實例是用來在應用重註冊"全局"組件的

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

應用實例暴露的大多數方法都會返回該同一實例，允許鏈式:

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

 

根組件

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

一個應用需要被掛載到一個 DOM 元素中。例如，如果你想把一個 Vue 應用掛載到 <div id="app"></div>，應該傳入 #app：

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

與大多數應用方法不同的是，mount 不返回應用本身。相反，它返回的是根組件實例。

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

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

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

組件實例 property

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

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

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

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

生命週期鉤子

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

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

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

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

TIP

不要在選項 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 之類的錯誤。

生命週期圖示

現在不明白沒事 以後會越來越明白的~