【总结】转行小白历险记 Vue 3 组合式 API 的内置的实用函数和生命周期钩子

2023-12-21 06:56:23

一、实用函数

  1. ref

    • 用于创建一个响应式引用,适用于基本数据类型
  2. reactive

    • 用于创建一个响应式对象,适用于对象和数组
  3. computed

    • 创建一个计算属性,其值是基于响应式依赖动态计算的。
  4. watch

    • 用于观察响应式引用或响应式对象的变化,并在变化时执行回调函数。
  5. watchEffect

    • 立即执行传入的函数,并响应式地追踪其依赖,并在依赖变化时重新执行。
  6. toRefs

    • 把一个响应式对象的每个属性都转换为一个响应式引用。
  7. toRef

    • 创建一个响应式引用,指向对象的某个属性
  8. unref

    • 如果参数是一个 ref,返回内部值,否则返回参数本身。
    • const refValue = ref('World');
      
      console.log(refValue); // 输出整个响应式对象,包括其结构和当前值
      console.log(refValue.value); // 输出: 'World',这是 ref 对象的内部值
      
      console.log(unref(plainValue)); // 输出: 'Hello'
      console.log(unref(refValue)); // 输出: 'World',无论 refValue 是不是 ref 类型,都能正确处理
      
  9. isRef

    • 检查一个值是否为 ref 对象。
  10. onMounted

    • 在组件挂载完成后执行。
  11. onUnmounted

    • 在组件卸载时执行。
  12. onActivatedonDeactivated

    • keep-alive 缓存的组件激活或停用时执行。
  13. onBeforeMountonBeforeUpdateonBeforeUnmount

    • 分别在组件挂载、更新、卸载之前执行。
  14. setup

    • 组合式 API 的入口函数,在组件创建之初执行。
  15. provideinject

    • 用于在组件之间实现依赖注入。
  16. nextTick

    • 在下一个 DOM 更新循环之后执行代码。

二、生命周期钩子

组合式 API 中的生命周期钩子通常用于在组件的不同阶段执行特定的逻辑。它们包括:

  • onBeforeMount

  • onMounted

  • onBeforeUpdate

  • onUpdated

  • onActivated

  • onDeactivated

  • onBeforeUnmount

  • onUnmounted

  • onErrorCaptured

  • onRenderTracked

  • onRenderTriggered

三、computed和watch的区别

computed

  1. 定义computed 用于创建一个基于响应式依赖动态计算的值。它是一个计算属性,当其依赖的响应式数据发生变化时,computed 的值会自动重新计算。

  2. 使用场景:当你需要从现有的响应式状态派生出新的状态时,使用 computed。例如,从一个响应式数组中计算出该数组的长度。

  3. 性能优化computed 具有内置的缓存机制。计算属性只有在其依赖的数据变化时才会重新计算,否则会返回上次的计算结果。

  4. 示例

const count = ref(0);
const doubled = computed(() => count.value * 2);

watch

  1. 定义watch 用于观察一个或多个响应式引用或函数的变化,并在变化时执行回调函数。它允许你对数据的变化做出反应,并执行副作用。

  2. 使用场景:当你需要在某些数据变化时执行异步操作或昂贵的操作,或者当数据变化时需要执行不影响模板渲染的副作用时,使用 watch

  3. 灵活性watch 提供了更多的灵活性,允许访问旧值和新值,还可以观察多个源。

  4. 示例

watch(count, (newValue, oldValue) => {
  console.log(`count 变化了,从 ${oldValue} 变为 ${newValue}`);
});

区别总结

  • 用途computed 用于创建基于其他响应式数据的派生状态;watch 用于执行响应数据变化的副作用。

  • 缓存computed 具有缓存,只有当依赖变化时才重新计算watch 没有缓存,每次观察的响应式源变化时都会执行,watch 监听的是数据的变化过程,而不是数据的最终状态

  • 灵活性watch 在处理复杂的逻辑和副作用时更加灵活。

文章来源:https://blog.csdn.net/TTTT2222111/article/details/135062143
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。