目錄

插槽(匿名插槽，具名插槽)

插槽概述

匿名插槽

具名插槽

Pinia(統一管理，共享數據）

pinia概述

安裝和使用Pinia

1 使用命令下載Pinia?

2 再main.js中導入，注冊到vue框架中

3使用pinia

持久化存儲插件

1 第一步：下載插件

2 第二步：在main.js文件中導入插件，并注冊，如圖所示

第三步：在stores文件夾下的counter.js文件中設置持久化存儲的store設置參數為true就可以實現持久化了。

生命周期

---

插槽(匿名插槽，具名插槽)

插槽概述

什么是插槽，它有什么用？當我們想把父組件中的某些片段插入到子組件的指定位置時就可以使用插槽來實現。

舉例：

有一個頭部的組件整體顏色和log布局都設計好了，但是碰到一個奇葩用戶，就是想在頭部的某個位置加上他想對女朋友說的話，難道我們要放棄已經做好的頭部組件，重新給他單獨做個嗎？能不能在使用現成的頭部組件的情況下，滿足客戶的個性化需求呢？這個時候就可以使用插槽，頭部組件還是照常使用，只不過把客戶個性化需求內容寫在父組件中，然后再子組件中引用生效，不影響其它使用該子組件的地方。

插槽分為匿名插槽和具名插槽。匿名插槽一般應用于簡單的通用情況，具名插槽一般用于稍復雜場景。

---

匿名插槽

• 案例1（爺傳父，爺傳父，父傳孫）

App.vue

<script setup>
import father from './views/father.vue';
import { provide, inject,ref,reactive} from 'vue';
</script><template>
<father><h2>爺爺</h2>
</father>
<br/>
</template><style scoped></style>

father.vue

<template><Son><slot></slot></Son><hr/>父親：  <slot></slot>
</template><script setup>
import { inject,ref } from 'vue';
import Son from '../views/son.vue'
</script><style lang="scss" scoped></style>

son.vue

<template> ?孫子： <slot></slot>
</template>?
<script setup>
import { inject ,provide,ref} from 'vue';
</script>?
<style lang="scss" scoped>?</style>

測試結果

---

具名插槽

由于匿名插槽，缺點：我使用slot標簽就可以使用 App.vue 攜帶的代碼片段、數據，但不具備唯一性，如果我只希望在某一個組件中使用，就可以使用具名插槽。

App.vue

<template><!-- <div>爺爺傳給孫子的基本數據：{{ parent }}<br>爺爺傳給孫子的對象數據：{{ parent2 }}</div> --><!-- <button @click="count">爺爺傳遞的函數</button> -->孫子： <slot></slot><hr/>爺爺傳給孫子的基本數據值：<slot name="data"></slot>
</template><script setup>
import { inject ,provide,ref} from 'vue';
</script><style lang="scss" scoped></style>

father.vue

<template><Son><slot></slot><slot name="data"></slot></Son><!-- <div>
爺爺傳給父親的基本數據值：{{ father }}<br/>爺爺傳給父親的對象值：{{ father1 }}</div> --><hr/>父親：  <slot></slot><hr/>爺爺傳給父親的基本數據值：<slot name="data"></slot>
</template><script setup>
import { inject,ref } from 'vue';
import Son from '../views/son.vue'
</script><style lang="scss" scoped></style>

son.vue

<script setup>
import father from './views/father.vue';
import { provide, inject,ref,reactive} from 'vue';
const data=ref(1234567890)
</script><template>
<father><h2>爺爺</h2><template v-slot:data>帆帆帆帆帆帆帆帆帆帆</template>
</father>
<br/>
</template><style scoped></style>

測試結果

總結:插槽只能嵌套傳遞，無法跨組件傳遞

---

Pinia(統一管理，共享數據）

pinia概述

pinia 可以理解為vue框架中的存儲倉庫，存儲組件中需要的數據。

例如在之前的案例中，無論是父子組件數據的傳遞還是跨組件傳數據，一旦組件的數量超出了一定的范圍，它們傳遞的數據就會很大程度上會搞錯，甚至分不清哪一個數據是哪一個組件傳遞過來的或者傳給哪一個組件。

基于上面的問題，使用pinia 統一管理那些組件的傳遞的數據，當需要時，再從pinia 配置文件中獲取

---

安裝和使用Pinia

步驟

1 使用命令下載Pinia?

安裝命令：npm ?install ?pinia

---

2 再main.js中導入，注冊到vue框架中

通過上述操作，我們的項目就可以使用pinia了。

3使用pinia

上面介紹的時候說了pinia是一個庫，那么具體**幫我們管理組件之間數據和狀態的家伙是誰呢，一般管它叫store**，接下來我們就來具體應用它。

在項目的src目錄下新建一個stores的目錄，然后再stores目錄下新建一個js文件當做我們存儲數據的倉庫，課程案例中取名用的是counter.js,然后在counter.js文件中定義store數據并導出，返回。實操如圖所示：

counter.js文件

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'export const useStore = defineStore('counter',() => {const count = ref(0)const doubleCount = computed(() => count.value * 2)function increment() {count.value++}return { count, doubleCount, increment }
})

我們已經完成了對存儲數據的配置文件 counter.js的構建，現在就可以正式開始使用配置文件的數據

App.vue

<script setup>
import { useStore } from './stores/counter.js'
const store =useStore()</script><template><button @click="store.increment">count: {{ store.count }}</button><hr/><button @click="store.increment">使用雙倍的count：: {{ store.doubleCount }}</button></template><style scoped></style>

測試結果

store.doubleCount 函數 使用了computed 計算屬性， 只有當count數據發生變化時，才使用到computed函數。

如果count數據不發生改變，則不會使用到computed 函數。這樣做有利于節省資源，避免多次無效調用

小結：先把一些需要用到的共享數據或函數給定義在一個js文件中，然后把該文件文件export出去。在使用的地方先導入，然后創建一個操作對象，通過操作對象進行操作即可。

---

持久化存儲插件

基于上面的案例，我們發現，如果當刷新瀏覽器，數據又返回到最開始的值，數據發生了改變。

我現在希望將數據存儲在瀏覽器的本地存儲當中，這樣可以實現對數據的永久存儲

操作步驟

1 第一步：下載插件

安裝插件命令 npm i pinia-plugin-persistedstate

2 第二步：在main.js文件中導入插件，并注冊，如圖所示

第三步：在stores文件夾下的counter.js文件中設置持久化存儲的store設置參數為true就可以實現持久化了。

測試結果：重新運行上面的案例

生命周期

生命周期這里指的是組件涉及的生命周期函數。組件實例從創建到銷毀過程中不同時間點自動調用的函數被稱為生命周期函數。

組件的什么周期大體可以? 分為掛載階段-更新階段-卸載階段-錯誤處理四個階段。

組件掛載之前還有模板編譯和渲染兩個步驟。模板編譯是值把 組件模板轉為js代碼；渲染指的是把生成的js代碼渲染到頁面，生成虛擬DOM；掛載指的是把虛擬DOM掛載到真實的DOM樹上，使其在頁面顯示出來。

在這里我們重點關注兩個函數：

onMounted函數：掛載到瀏覽器后

onupdated函數 ? 瀏覽器數據的更新后

注意：這兩個函數當達到生命周期的某一個階段后，會自動調用

<script setup>
import { ref, onMounted, onUpdated } from 'vue'
//生命周期
const count = ref(0);
onMounted(()=>{console.log('mounted',count.value+10) 
})
onUpdated(()=>{console.log('updated')
})
</script><template><button @click="count++">{{ count }}</button>
</template><style scoped></style>

測試結果

觀察控制臺：

總結：當第一次運行后，掛載到瀏覽器，之后即使數據發生變化，也不再重新掛載，