前言

這個月開始重新開始學習Vue3，從理解基本使用到模擬實現！

本文關于應用實例和組件實例

基本目錄如下：

image.png

創(chuàng)建一個Vue的應用實例

這部分主要講以下3點：

image.png

1. 通過createApp函數創(chuàng)建Vue的應用實例

代碼如下：

const app = Vue.createApp({ /* 相關選項配置 */ })

app即是應用實例

2. 返回的應用實例可以用于注冊全局組件

比如：

app.component('Xxx', XxxComponent)

3. 應用實例上有很多方法都允許鏈式調用

比如:

Vue.createApp({ /* 相關選項配置 */ })
    .component('Xxx', XxxComponent)

原因在于姥闭，它們都是返回同一個app實例

根組件

這部分主要講以下幾點：

image.png

1. 利用createApp創(chuàng)建實例時需要傳遞一個選項，表示根組件的配置

比如，我們使用vite創(chuàng)建的項目中秉剑，有個main.js文件

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

上述代碼中所傳遞的App即是根組件的配置

對應找到App.vue文件看看

//App.vue
//.....Omit some code.....
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

這里可以看到它導出的東西，我們干脆一探究竟稠诲，在看看子組件HelloWorld.vue

//components/HelloWorld.vue
//.....Omit some code.....
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      count: 0
    }
  }
}
</script>

于是我們可以看到這個組件的配置有name侦鹏、props、data等臀叙，在實際使用中配置會更加豐富一些略水，之后會具體講到

2. 可通過mount方法將一個應用掛載到一個DOM中，當掛載時劝萤，根組件會作為渲染的起點渊涝。需要注意：mount返回的是根組件實例，而不是應用實例了

為了看清楚，我們可以將app應用實例和根組件實例打印出來看

const app = createApp(App)
console.log(app);
console.log(app.mount('#app'));

結果如下：

image.png

可以看到兩者是不一樣的跨释！

3. 一個根組件可以包含n個子組件胸私，每個組件將有自己的組件實例，這些組件實例都共享同一個應用實例

還是以vite創(chuàng)建的Vue3項目為例鳖谈，App組件中還包含子組件HelloWorld

import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}

除此之外岁疼，你還可以添加其他自定義的組件

4. 本質上，根組件與其他組件是一樣的

都是組件缆娃，兩者并沒有什么不同捷绒，包括行為和傳遞的配置其實都是一樣的，只是根組件作為根贯要，其他組件作為根組件的子組件而已

組件配置選項

這部分主要講以下4點：

image.png

1. data中定義的屬性都是通過組件實例暴露

比如在App組件中的配置data,里面定義一個屬性name

data() {
    return {
      name: 'Alice'
    }
}

然后我們通過組件實例來獲取到,需要注意不是應用實例

const app = createApp(App)
const vm = app.mount('#app')
console.log(app.name) // undefined
console.log(vm.name) // Alice

2. 其他選項如methods疙驾，props，computed郭毕，inject 和 setup它碎，當中定義的屬性也會添加到組件實例中

其實就在導出的配置選項中填入需要配置的東西即可

{
  name: 'Xxx',
  props: {...},
  data() {
    return {
      //...
    }
  },
  setup(){
      //....
  }
  //等等
}

3. 組件實例的所有屬性，都可以在組件的模板中訪問

比如HelloWorld組件中的count屬性

//components/HelloWorld.vue
<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      count: 0
    }
  }
}
</script>

4. 組件實例還存在一些內置屬性显押，如$attrs 和 $emit等

前面有個$扳肛，是為了避免與用戶定義的屬性發(fā)生沖突

生命周期鉤子函數

這里主要講以下5點內容

image.png

1. 每個組件在被創(chuàng)建時都會經過一系列的初始化過程，這個過程中會運行一些生命周期鉤子函數

這個過程會包括模板編譯乘碑、掛載挖息、數據變化、更新DOM等等

2. 作用是兽肤，用戶可以在組件的不同階段添加自己的代碼

例如我在組件掛載的時候執(zhí)行一些操作

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
  <h1>{{name}}<h1>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      name: 'Alice'
    }
  },
  mounted(){
    console.log(`組件掛載了,修改name屬性~`);
    this.name = 'Tom'
  }
}
</script>

結果如下

image.png

可以看到套腹，我們通過鉤子函數mounted，成功修改了name的值

3. 常見的鉤子函數资铡，如created电禀、mounted、updated 和 unmounted等等

其實還有很多笤休，由于都列出來沒多大意義尖飞。后面用到的時候我再詳細講解！

4. 里頭this指向調用它的當前活動實例

其實就是當前組件實例店雅，上個例子已經試過了

this.name = 'Tom'

5. 注意：不要在選項配置的屬性中使用箭頭函數政基，也不要在鉤子函數的回調中使用箭頭函數，原因是箭頭函數中沒有this

箭頭函數沒有this闹啦，所以如果使用箭頭函數沮明，它會一直向上找，直至找到為止窍奋！為了避免出錯荐健，一般都不要這樣寫

mounted: () => {...}

END

以上就是關于應用實例和組件實例的所有內容

如有問題酱畅，歡迎留言告知，感謝~

為了方便下載摧扇，我將相關的高清思維導圖及源文件上傳至GitHub圣贸，可移步下載：https://github.com/jCodeLife/mind-map