前言
這個月開始重新開始學習Vue3
,從理解基本使用到模擬實現!
本文關于應用實例和組件實例
基本目錄如下:
創(chuàng)建一個Vue的應用實例
這部分主要講以下3
點:
1. 通過createApp函數創(chuàng)建Vue的應用實例
代碼如下:
const app = Vue.createApp({ /* 相關選項配置 */ })
app
即是應用實例
2. 返回的應用實例可以用于注冊全局組件
比如:
app.component('Xxx', XxxComponent)
3. 應用實例上有很多方法都允許鏈式調用
比如:
Vue.createApp({ /* 相關選項配置 */ })
.component('Xxx', XxxComponent)
原因在于姥闭,它們都是返回同一個app
實例
根組件
這部分主要講以下幾點:
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'));
結果如下:
可以看到兩者是不一樣的跨释!
3. 一個根組件可以包含n個子組件胸私,每個組件將有自己的組件實例,這些組件實例都共享同一個應用實例
還是以vite創(chuàng)建的Vue3項目為例鳖谈,App組件中還包含子組件HelloWorld
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
除此之外岁疼,你還可以添加其他自定義的組件
4. 本質上,根組件與其他組件是一樣的
都是組件缆娃,兩者并沒有什么不同捷绒,包括行為和傳遞的配置其實都是一樣的,只是根組件作為根贯要,其他組件作為根組件的子組件而已
組件配置選項
這部分主要講以下4
點:
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
點內容
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>
結果如下
可以看到套腹,我們通過鉤子函數mounted
,成功修改了name
的值
3. 常見的鉤子函數资铡,如created电禀、mounted、updated 和 unmounted等等
其實還有很多笤休,由于都列出來沒多大意義尖飞。后面用到的時候我再詳細講解!
4. 里頭this指向調用它的當前活動實例
其實就是當前組件實例店雅,上個例子已經試過了
this.name = 'Tom'
5. 注意:不要在選項配置的屬性中使用箭頭函數政基,也不要在鉤子函數的回調中使用箭頭函數,原因是箭頭函數中沒有this
箭頭函數沒有this闹啦,所以如果使用箭頭函數沮明,它會一直向上找,直至找到為止窍奋!為了避免出錯荐健,一般都不要這樣寫
mounted: () => {...}
END
以上就是關于應用實例和組件實例的所有內容
如有問題酱畅,歡迎留言告知,感謝~
為了方便下載摧扇,我將相關的高清思維導圖及源文件上傳至GitHub圣贸,可移步下載:https://github.com/jCodeLife/mind-map