【解决方案】【最佳实践】vue3.0生命周期、组合式API（示例代码+详细讲解+中文图解）

     前段时间，发布了关于vue2.0的生命周期的文章：

   【解决方案】【最佳实践】vue2.0生命周期、运行机制（详细讲解+中文图解）

       我没有把vue2.0生命周期和vue3.0生命周期写在一起，因为写在一起对于初学者来说，容易搞混。后面会专门出一期vue2.0生命周期和vue3.0生命周期对比的文章。深入浅出，共同学习。

在Vue 3.0中，生命周期钩子被重命名并且分成了不同的阶段。这是为了更好地描绘组件的整个生命周期，并且使得钩子的用途更加清晰。

Vue 3.0中的生命周期钩子以及它们的用途：

1. setup(): 这不是一个生命周期钩子，而是一个组合API的入口，在这里可以访问到响应式数据和生命周期钩子。

2. onBeforeMount(): 在挂载开始之前调用。

3. onMounted(): 组件被挂载后调用。

4. onBeforeUpdate(): 在组件因响应式数据更新而准备重新渲染之前调用。

5. onUpdated(): 在组件重新渲染之后调用。

6. onBeforeUnmount(): 在组件卸载前调用。

7. onUnmounted(): 在组件卸载后调用。

图例-Vue 3.0中的生命周期

代码示例-展示如何在Vue 3.0中使用这些生命周期钩子：

<template>
  <div>{{ count }}</div>
</template>
 
<script>
import { ref, onMounted, onUpdated, onUnmounted } from 'vue';
 
export default {
  setup() {
    const count = ref(0);
 
    onMounted(() => {
      console.log('组件已挂载');
    });
 
    onUpdated(() => {
      console.log('组件更新了');
    });
 
    onUnmounted(() => {
      console.log('组件已卸载');
    });
 
    // 增加计数的方法
    function incrementCount() {
      count.value++;
    }
 
    return { count, incrementCount };
  }
};
</script>

在这个例子中，我们创建了一个响应式的计数器，并在setup()函数中定义了生命周期钩子。当组件挂载、更新或卸载时，相应的函数会被调用。

Vue 3.0 引入了组合式 API（Composition API）

Vue 3.0 引入了组合式 API（Composition API），这是一种新的编程范式，用于替代 Vue 2 中的选项式 API（Options API）。组合式 API 的设计目的是提供一种更灵活、更可组合的方式来编写组件逻辑。

以下是对 Vue 3.0 中组合式 API 的一些关键理解：

1. 更模块化：组合式 API 允许开发者将组件逻辑分解成更小的、可复用的函数，这些函数可以独立测试和重用。

2. 响应式系统：通过 ref 和 reactive 函数，Vue 3.0 提供了一套新的响应式系统，使得开发者可以更容易地创建和管理响应式状态。

3. 生命周期钩子：组合式 API 提供了一组生命周期钩子，如 setup、onMounted、onUpdated、onUnmounted 等，允许开发者在组件的不同阶段执行特定的逻辑。

4. 模板和逻辑分离：虽然组合式 API 允许在 setup 函数中编写逻辑，但模板仍然保持独立，这有助于保持代码的清晰和可维护性。

5. 更好的TypeScript支持：组合式 API 与 TypeScript 的集成更加紧密，提供了更好的类型推断和类型安全。

6. 逻辑复用：由于函数可以被导入和导出，组合式 API 使得逻辑的复用变得更加容易，特别是在处理多个组件间的共享逻辑时。

7. 逻辑组合：组合式 API 的名称来源于其允许开发者通过组合不同的函数来构建复杂的逻辑。

8. 使用场景：对于一些复杂的组件，使用组合式 API 可以更清晰地组织代码，尤其是在需要多个数据源或多个副作用的情况下。

9. 学习曲线：对于习惯了 Vue 2 选项式 API 的开发者来说，组合式 API 可能需要一些时间来适应，但它提供了更强大的抽象能力和更灵活的代码组织方式。

10. 向后兼容：Vue 3.0 同时支持选项式 API 和组合式 API，这意味着开发者可以根据自己的喜好和项目需求选择使用哪种方式。

组合式 API 是 Vue 3.0 的一个重要特性，它为构建大型应用程序提供了更好的支持，并且鼓励开发者采用更模块化和可测试的编程实践。

最佳实践-Vue 3.0 组合式 API

Vue 3.0 的组合式 API（Composition API）提供了一种新的方式来组织和重用代码。以下是一些具体的实践步骤，帮助你开始使用 Vue 3.0 的组合式 API：

1. 创建响应式状态

使用 ref 和 reactive 来创建响应式状态：

import { ref, reactive } from 'vue'; const count = ref(0); // 创建一个响应式的引用 
const state = reactive({ name: 'John' }); // 创建一个响应式的状态对象

2. 使用 setup 函数

setup 是组合式 API 的核心，它在组件创建之前执行，并且可以访问到组件的 props 和 context：

import { ref, reactive, onMounted } from 'vue'; 
export default { setup(props, { emit }) { 
   const count = ref(0); 
   function increment() { 
      count.value++; 
      emit('update', count.value); 
   } 
   onMounted(() => { 
      console.log(`The count is ${count.value}`); 
   }); 
   return { count, increment }; 
   } 
};

3. 使用生命周期钩子

组合式 API 提供了与 Vue 2 生命周期钩子相对应的函数：

import { onMounted, onUpdated, onUnmounted } from 'vue'; 
setup() { 
   onMounted(() => { // 当组件挂载后执行 }); 
   onUpdated(() => { // 当组件更新时执行 });
   onUnmounted(() => { // 当组件卸载后执行 }); 
}

4. 条件渲染和渲染列表

使用 v-if、v-else-if、v-else 和 v-for 指令进行条件渲染和列表渲染，与 Vue 2 相同：

return { 
// ... 
render() { 
    return ( <div> 
        {count.value > 0 && <p>You have {count.value} items</p>}
        <ul> {list.value.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> 
        </div> ); 
    } 
};

5. 事件处理

使用 v-on 或 @ 符号来监听 DOM 事件或组件事件：

return { // ... 
increment, render() { 
    return ( 
        <button onClick={increment}>Increment</button> 
    ); 
    } 
};

6. 计算属性和观察者

使用 computed 和 watch 创建计算属性和观察者：

import { computed, watch } from 'vue';
const doubledCount = computed(() => count.value * 2); 
watch(count, (newValue, oldValue) => { 
    console.log(`Count changed from ${oldValue} to ${newValue}`); 
});

7. 模板引用

使用 ref 来创建对模板中 DOM 元素的引用：

import { ref } from 'vue'; 
const inputRef = ref(null); 
return { inputRef, render() { 
return ( <input type="text" ref={inputRef} /> ); } };

8. 组合函数

使用 setup 中的函数来组合逻辑，使得代码更加模块化和可重用：

import { useFetchData } from './useFetchData';
const { data, isLoading, error } = useFetchData('https://api.example.com/data'); return { data, isLoading, error };

9. 组件间通信

使用 provide 和 inject 进行跨组件通信：

import { provide, inject } from 'vue'; 
provide('theme', 'dark'); 
const theme = inject('theme', 'light');

10. 错误处理

使用 try-catch 语句来捕获和处理错误：

import { ref } from 'vue'; 
const error = ref(null); 
try { // 可能抛出错误的代码 
} 
catch (err) {
   error.value = err; 
}

组合式 API 的实践需要开发者对 Vue 3 的响应式系统和函数式编程有一定的理解。通过这些实践，你可以更灵活地组织和重用代码，构建更复杂的 Vue 组件。

结语

🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，支持一下博主~