学习vue3阶段性复习（插槽，Pinia,生命周期）

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

插槽概述

匿名插槽

具名插槽

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>

测试结果

观察控制台：