Skip to content

学习Vue3有感

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

学习视频:https://www.bilibili.com/video/BV1Za4y1r7KE

项目

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

基本语法

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

组件通信

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

生命周期

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

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

Vue2 和 Vue3 的生命周期对比

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

路由

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

状态管理

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

插槽

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

所有文章版权皆归博主所有,仅供学习参考。