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

一、实用函数

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. onActivated 和 onDeactivated：

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

13. onBeforeMount、onBeforeUpdate 和 onBeforeUnmount：

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

14. setup：

    • 组合式 API 的入口函数，在组件创建之初执行。

15. provide 和 inject：

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

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 在处理复杂的逻辑和副作用时更加灵活。