【6月日新计划更文活动】第22天

Vue3 中的生命周期

• Vue3 中可以继续使用 Vue2.x 中的生命周期钩子，但有两个被更名：

  • beforeDestroy改名为beforeUnmount
  • destroyed改名为unmounted

• Vue3 也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：

  • beforeCreate ======> setup()
  • created ===========> setup()
  • beforeMount =======> onBeforMount
  • mounted ===========> onMounted
  • beforeUpdate ======> onBeforUpdate
  • update ============> onUpdate
  • beforeUnmont ======> onBeforeUnmount
  • unmonted ==========> onUnmounted

自定义hook函数

• 什么是hook？ —— 本质是一个函数，把 setup 函数中使用 Composition API进行了封装
• 类似于 Vue2 中的Mixin
• 自定义 hook 的优势：复用代码，让 setup 中的逻辑更清楚易懂

toRef和toRefs

• 作用：创建一个 ref 对象，其 value 值指向另一个对象中的某个属性值
• 语法：const name = toRef(person, 'name')
• 应用：要将响应式对象中的某个属性单独提供给外部使用时
• 扩展：toRefs与toRef功能一直，但可以批量创建多个ref对象，语法：toRefs(person)