理解應用實例和組件實例 | 重學Vue3

前言

這個月開始重新開始學習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侦鹏、propsdata等臀叙,在實際使用中配置會更加豐富一些略水,之后會具體講到

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市扛稽,隨后出現的幾起案子吁峻,更是在濱河造成了極大的恐慌,老刑警劉巖在张,帶你破解...
    沈念sama閱讀 222,378評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件用含,死亡現場離奇詭異,居然都是意外死亡帮匾,警方通過查閱死者的電腦和手機啄骇,發(fā)現死者居然都...
    沈念sama閱讀 94,970評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來瘟斜,“玉大人缸夹,你說我怎么就攤上這事÷菥洌” “怎么了虽惭?”我有些...
    開封第一講書人閱讀 168,983評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長蛇尚。 經常有香客問我芽唇,道長,這世上最難降的妖魔是什么取劫? 我笑而不...
    開封第一講書人閱讀 59,938評論 1 299
  • 正文 為了忘掉前任匆笤,我火速辦了婚禮,結果婚禮上谱邪,老公的妹妹穿的比我還像新娘炮捧。我一直安慰自己,他們只是感情好虾标,可當我...
    茶點故事閱讀 68,955評論 6 398
  • 文/花漫 我一把揭開白布寓盗。 她就那樣靜靜地躺著,像睡著了一般璧函。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上基显,一...
    開封第一講書人閱讀 52,549評論 1 312
  • 那天蘸吓,我揣著相機與錄音,去河邊找鬼撩幽。 笑死库继,一個胖子當著我的面吹牛箩艺,可吹牛的內容都是我干的。 我是一名探鬼主播宪萄,決...
    沈念sama閱讀 41,063評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼艺谆,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了拜英?” 一聲冷哼從身側響起静汤,我...
    開封第一講書人閱讀 39,991評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎居凶,沒想到半個月后虫给,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 46,522評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡侠碧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,604評論 3 342
  • 正文 我和宋清朗相戀三年抹估,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片弄兜。...
    茶點故事閱讀 40,742評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡药蜻,死狀恐怖,靈堂內的尸體忽然破棺而出替饿,到底是詐尸還是另有隱情语泽,我是刑警寧澤,帶...
    沈念sama閱讀 36,413評論 5 351
  • 正文 年R本政府宣布盛垦,位于F島的核電站湿弦,受9級特大地震影響,放射性物質發(fā)生泄漏腾夯。R本人自食惡果不足惜颊埃,卻給世界環(huán)境...
    茶點故事閱讀 42,094評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蝶俱。 院中可真熱鬧班利,春花似錦、人聲如沸榨呆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽积蜻。三九已至闯割,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間竿拆,已是汗流浹背宙拉。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留丙笋,地道東北人谢澈。 一個月前我還...
    沈念sama閱讀 49,159評論 3 378
  • 正文 我出身青樓煌贴,卻偏偏與公主長得像,于是被迫代替她去往敵國和親锥忿。 傳聞我的和親對象是個殘疾皇子牛郑,可洞房花燭夜當晚...
    茶點故事閱讀 45,747評論 2 361

推薦閱讀更多精彩內容

  • 創(chuàng)建一個應用實例 每個Vue應用都是通過createApp函數創(chuàng)建一個應用實例開始的: 應用實例是注冊一個可供組件...
    zhouyu629閱讀 257評論 0 0
  • Vue.mixin 混入 (mixin) 提供了一種非常靈活的方式,來分發(fā) Vue 組件中的可復用功能敬鬓。一個混入對...
    LUOTAOLUOTAO閱讀 196評論 0 0
  • 全局API createApp 返回一個提供應用上下文的應用實例淹朋。應用實例掛載的整個組件樹共享同一個上下文。 de...
    WangLizhi閱讀 2,505評論 0 0
  • Vue實例是Vue應用的啟動器列林,Vue組件是Vue實例的擴展瑞你。 1. Vue實例 通過構造函數可以創(chuàng)建一個Vue的...
    娜姐聊前端閱讀 10,180評論 2 12
  • 快速開始 通過 CDN: 通過 Codepen[https://codepen.io/yyx990803/pen/...
    AAA前端閱讀 597評論 0 1