20.vue3学习篇-Composition

在 Vue 3 中，Composition API 是一种新的编写组件逻辑的方式，它提供了更灵活和可维护的代码组织方式。

一、核心概念

1.setup函数

• 这是 Composition API 的入口点。在组件中，setup 函数会在组件实例创建之前被调用。
• setup 函数接收两个参数：props 和 context。props 是传递给组件的属性，context 包含了一些与组件相关的方法和属性，如 emit、slots、attrs 等。
• setup 函数必须返回一个对象，这个对象中的属性和方法可以在组件的模板和其他选项中使用。

2.响应式数据

• 使用 ref 和 reactive 函数来创建响应式数据。ref 用于创建单个值的响应式对象，reactive 用于创建对象类型的响应式对象。
• 响应式数据的变化会自动触发组件的重新渲染。

3.声明周期钩子

• 在 Composition API 中，可以使用 onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted 等函数来注册生命周期钩子。
• 这些函数在相应的生命周期阶段被调用，可以在其中执行特定的逻辑。

二、使用示例

1. 创建响应式数据：

   import { ref, reactive } from 'vue'
   
   export default {
       setup () {
           const count = ref(0)
           const person = reactive({
               name: 'John',
               age: 30
           })
   
           return {
               count,
               person
           }
       }
   }

2. 定义方法：

   import { ref, reactive } from 'vue'
   
   export default {
       setup () {
           const count = ref(0)
           const person = reactive({
               name: 'John',
               age: 30
           });
           
           const incrementCount = () => {
               count.value++
           };
   
           const changePersonName = () => {
               person.name = 'jane'
           };
           
           return {
               count,
               person,
               incrementCount,
               changePersonName
           }
       }
   }

   3.使用生命周期钩子：

   import { onMounted, onUnmounted } from 'vue'
   
   export default {
       setup () {
           onMounted(() => {
               console.log('Component mounted.')
           });
           
           onUnmounted(() => {
               console.log('Component unmounted.')
           });
   
   
           return {};
       }
   }

三、优势

1.逻辑复用：

• 通过将相关的逻辑提取到函数中，可以轻松地在多个组件中复用这些逻辑。这使得代码更加可维护和可测试。
• 例如，可以将一些通用的业务逻辑封装到一个函数中，然后在不同的组件中调用这个函数。

2.更好的组织和可读性：

• Composition API 允许将相关的逻辑分组在一起，使得代码更加清晰和易于理解。
• 与 Options API 相比，Composition API 避免了将不同类型的逻辑分散在不同的选项中，使得代码的结构更加扁平。

3.类型推断：

• 在使用 Composition API 时，由于函数的参数和返回值类型更加明确，因此可以更好地利用 TypeScript 等类型系统进行类型推断，提高代码的类型安全性。

总之，Vue 3 的 Composition API 提供了一种更灵活、可维护和可复用的方式来编写组件逻辑。它使得代码的组织更加清晰，逻辑复用更加容易，并且提高了代码的可读性和可测试性。