学习vue3系列生命周期

Posted 2022-05-24 前端精髓

之前已经介绍了 vue3 的相关知识点：ref，reactive，computed，watch，watchEffect，toRef，toRefs 这些响应式的API，相信大家对 vue3 已经有一定的理解了。

生命周期

除了这些函数 vue3 还增加了些生命周期，可以直接导入 onXXX 一族的函数来注册生命周期钩子：与 2.x 版本生命周期相对应的组合式 API。

1、beforeCreate -> 使用 setup()

2、created -> 使用 setup()

3、beforeMount -> onBeforeMount

4、mounted -> onMounted

5、beforeUpdate -> onBeforeUpdate

6、updated -> onUpdated

7、beforeDestroy -> onBeforeUnmount

8、destroyed -> onUnmounted

9、errorCaptured -> onErrorCaptured

import  onMounted, onUpdated, onUnmounted  from 'vue'

const MyComponent = 
  setup() 
    onMounted(() => 
      console.log('mounted!')
    )
    onUpdated(() => 
      console.log('updated!')
    )
    onUnmounted(() => 
      console.log('unmounted!')
    )
  ,

这些生命周期钩子注册函数只能在 setup() 期间同步使用， 因为它们依赖于内部的全局状态来定位当前组件实例（正在调用 setup() 的组件实例）, 不在当前组件下调用这些函数会抛出一个错误。

生命周期的用法和 vue2 无太大的区别，只是使用的时候记得把 API 导入进来。

依赖注入

Vue 组合式 API对依赖注入提供了 provide 和 inject 函数，功能类似 vue2 options API 的 provide/inject。provide 和 inject 函数都只能在当前活动组件实例的 setup() 中调用。

在上游组件提供 provide ：

  setup () 
    provide('Theme', 'dark')
  

在下游组件使用 ：

<template>
  <div> hello </div>
</template>

<script>
import  ref, inject  from 'vue'
export default 
  setup () 
    const theme = inject('Theme', 'light' /* 默认值 */)
    console.log(theme, '依赖注入')
  

</script>

工具函数

vue3 还有一些其它API，这个工具函数如下：

1、readonly 把对象变成只读的。

2、isRef 检查一个值是否为一个 ref 对象。

3、isProxy 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理。

4、isReactive检查一个对象是否是由 reactive 创建的响应式代理。

5、isReadonly检查一个对象是否是由 readonly 创建的只读代理。

6、unref如果参数是一个 ref 则返回它的 value，否则返回参数本身

当我们在组件间提取并复用逻辑时，组合式 API 是十分灵活的。一个组合函数仅依赖它的参数和 Vue 全局导出的 API，而不是依赖其微妙的 this 上下文。你可以将组件内的任何一段逻辑导出为函数以复用它。你甚至可以通过导出整个 setup 函数达到和 extends 等价的效果。