vue3的选项模式 和组合模式

vue3记录 选项模式 和组合模式

vue 官网地址 https://cn.vuejs.org/guide/introduction.html

1.Vue3 的选项式 API 相较于 Vue2 有了较大的改进，主要包括以下几点：

1. 通过 createApp 方法创建应用，直接传入 options 对象作为组件选项，而不是直接导出一个对象作为组件选项。

2. data 选项被移除，使用 reactive 或 ref 函数来处理数据响应式。

3. computed 选项被改为 computed 函数。

4. methods 选项被保留，但是其内部的 this 指向已经发生了变化，需要使用 bind 方法显式地绑定 this。

5. watch 选项被改为 watchEffect 函数。

6. lifeCycle 选项被改为 setup 函数，用于组件的初始化和数据响应式处理等操作。

7. provide 和 inject 选项被沿用，但是需要通过 inject 函数来获取父组件提供的数据。

总的来说，Vue3 的选项式 API 更加简洁明了，功能更加强大，具有更好的扩展性和可维护性。

Vue3 除了对选项式 API 进行优化外，还新增了一种组件编写方式 - 组合式 API。组合式 API 的主要思想是将组件逻辑分解为更小的可复用函数，并通过这些函数组合出一个完整的组件。相比于传统的选项式 API，组合式 API 可以更好地实现组件的复用和分离关注点。

2.组合式 API 主要包括以下几个函数：

1. setup 函数：用于组件的初始化和数据响应式处理等操作。

2. reactive 函数：用于将对象转换为响应式对象。

3. ref 函数：用于创建一个包装了基本数据类型的响应式对象。

4. computed 函数：用于计算属性的定义。

5. watchEffect 函数：用于监听响应式数据的变化。

6. onMounted 函数：用于组件挂载时的回调函数。

7. onUpdated 函数：用于组件更新时的回调函数。

8. onUnmounted 函数：用于组件卸载时的回调函数。

通过这些函数的组合，我们可以构建出一个完整的组件。相比于传统的选项式 API，组合式 API 不需要在多个选项之间切换，降低了学习成本，也更加符合函数式编程的思想。

3.选项式和组合式是 Vue 组件编写方式的两种不同风格，下面简单对比一下它们的区别：

1. 选项式：Vue2 中使用的编写方式。通过一个对象的选项来定义组件的数据、计算属性、方法、生命周期等内容。选项式使用的是对象字面量形式，书写时需要关注选项的顺序和格式，容易出现错位和混淆。

2. 组合式：Vue3 中引入的新的编写方式。通过将组件逻辑拆分为独立的函数或 Hooks，再通过这些函数来描述组件的数据、计算属性、方法、生命周期等内容。组合式使用的是函数式编程的风格，将组件拆分为可复用的逻辑单元，易于维护和复用。

在使用选项式编写组件时，一个组件的所有选项都需要编写在同一个对象中，很容易造成代码冗长、复杂的情况，同时也不利于组件的重用和测试。而组合式则可以更加灵活的组合不同的逻辑单元，实现组件的高内聚、低耦合。

总的来说，选项式和组合式都有各自的优缺点，选项式更加面向对象和传统，适合对传统编程方式较为熟悉的开发人员；组合式更加函数式和灵活，适合对函数式编程方式有一定了解的开发人员。