学习Vue3有感

之前虽然断断续续看了不少Vue的学习视频，但是从来没有系统性的去思考前端的一些问题，导致学习总是浅尝辄止。在经历过一个简单的Vue2项目后，我开始对前端开发感兴趣，因此我决定这一次好好学习一下Vue3，其中简要记录一下我遇到的重要知识点。
学习视频：https://www.bilibili.com/video/BV1Za4y1r7KE

项目

项目：https://github.com/01Petard/vue-project-demo

基本语法

setup语法糖的出现，彻底改变了script部分的代码布局
ref和reactive的出现，改变了以往的基本类型和对象类型的响应式数据的修改方式
如果需要对数据进行解构赋值，同时保持响应式数据，则可以使用toRef()和toRefs()，区别是toRef()一次只能拿一个值，toRefs()可以解构对象所有值
computed计算属性可以降低重复调用的次数，同时可以在里面使用get和set方法来调用值和设定值
watch支持深度监视和立即监视，可以监听一个ref、一个响应式对象、一个getter返回的值或多个数据源组成的数据
watchEffect可以全自动地监视响应式数据，不需要像watch那样指出需要监视的数据

组件通信

props：父传子和子传父，本质上是一回事，在父组件中给子组件标签中绑定响应式数据或方法，子组件通过defineProps<{}>()接收；子传父就是调用父组件中定义的函数。
自定义事件：父给子组件的标签中绑定一个自定义事件、函数，并在父组件中实现函数，子组件通过defineEmits接收，然后通过emit('事件名',参数)使用
mitt：

生命周期

Vue3 的父子组件生命周期执行顺序对比

父子组件挂载顺序一致：
- 父组件的 setup() → 父 onBeforeMount → 子组件 setup() → 子 onBeforeMount → 子 onMounted → 父 onMounted。
更新阶段顺序：
- onBeforeUpdate → 数据更新 → onUpdated。

Vue2 和 Vue3 的生命周期对比

阶段	Vue2 生命周期钩子	Vue3 生命周期钩子	变化说明
创建	`beforeCreate` `created`	无（改用 `setup()`）	用 `setup()` 函数替代了 `beforeCreate` 和 `created`，两者的逻辑直接在 `setup` 中初始化
挂载	`beforeMount` `mounted`	`onBeforeMount` `onMounted`	改名
更新	`beforeUpdate` `updated`	`onBeforeUpdate` `onUpdated`	改名
销毁/卸载	`beforeDestroy` `destroyed`	`onBeforeUnmount` `onUnmounted`	改名：更准确描述组件卸载（unmount）而非“销毁”（destroy）
其他	`activated`	`onActivated`	`<keep-alive>` 激活时调用，名称改为 `onActivated`（组合式 API）
	`deactivated`	`onDeactivated`	`<keep-alive>` 停用时调用，名称改为 `onDeactivated`
	`errorCaptured`	`onErrorCaptured`	捕获子组件错误，名称改为 `onErrorCaptured`
调试	无	`onRenderTracked`	调试用钩子，追踪谁触发了渲染（如依赖变化）
	无	`onRenderTriggered`	调试用钩子，追踪渲染触发的具体原因（如数据变化）

路由

router路由 Vue2 和 Vue3 差不多，重点学习一下编程式导航 router.push 就行了，router-link式的路由用得比较少

状态管理

Pinia，这是我第一次学习，之前我只了解vuex，但是目前好像都用pinia来作为集中式状态管理，pinia主要用于全局参数、组件之间通信等等
如果需要对Pinia的数据进行解构赋值，同时保持响应式数据，则可以使用storeToRefs()，不推荐用toRefs()
Pinia中同样有监听的功能，可以用$subscribe，但是为什么不用解构赋值+storeToRefs()将数据提取出来后，再用watch监听呢？

插槽

默认插槽：标签的占位符
具名插槽：在子组件的插槽中通过属性name指定父组件中用template 标签属性v-slot:<name> 或 #<name>的标签
作用域插槽：在插槽中使用自定义属性绑定，向父组件传递的props，父组件通过v-slot="params"获取传递的数据