vue3记录 选项模式 和组合模式
vue 官网地址 https://cn.vuejs.org/guide/introduction.html
1.Vue3 的选项式 API 相较于 Vue2 有了较大的改进,主要包括以下几点:
-
通过
createApp
方法创建应用,直接传入options
对象作为组件选项,而不是直接导出一个对象作为组件选项。 -
data
选项被移除,使用reactive
或ref
函数来处理数据响应式。 -
computed
选项被改为computed
函数。 -
methods
选项被保留,但是其内部的this
指向已经发生了变化,需要使用bind
方法显式地绑定 this。 -
watch
选项被改为watchEffect
函数。 -
lifeCycle
选项被改为setup
函数,用于组件的初始化和数据响应式处理等操作。 -
provide
和inject
选项被沿用,但是需要通过inject
函数来获取父组件提供的数据。
总的来说,Vue3 的选项式 API 更加简洁明了,功能更加强大,具有更好的扩展性和可维护性。
Vue3 除了对选项式 API 进行优化外,还新增了一种组件编写方式 - 组合式 API。组合式 API 的主要思想是将组件逻辑分解为更小的可复用函数,并通过这些函数组合出一个完整的组件。相比于传统的选项式 API,组合式 API 可以更好地实现组件的复用和分离关注点。
2.组合式 API 主要包括以下几个函数:
-
setup
函数:用于组件的初始化和数据响应式处理等操作。 -
reactive
函数:用于将对象转换为响应式对象。 -
ref
函数:用于创建一个包装了基本数据类型的响应式对象。 -
computed
函数:用于计算属性的定义。 -
watchEffect
函数:用于监听响应式数据的变化。 -
onMounted
函数:用于组件挂载时的回调函数。 -
onUpdated
函数:用于组件更新时的回调函数。 -
onUnmounted
函数:用于组件卸载时的回调函数。
通过这些函数的组合,我们可以构建出一个完整的组件。相比于传统的选项式 API,组合式 API 不需要在多个选项之间切换,降低了学习成本,也更加符合函数式编程的思想。
3.选项式和组合式是 Vue 组件编写方式的两种不同风格,下面简单对比一下它们的区别:
-
选项式:Vue2 中使用的编写方式。通过一个对象的选项来定义组件的数据、计算属性、方法、生命周期等内容。选项式使用的是对象字面量形式,书写时需要关注选项的顺序和格式,容易出现错位和混淆。
-
组合式:Vue3 中引入的新的编写方式。通过将组件逻辑拆分为独立的函数或 Hooks,再通过这些函数来描述组件的数据、计算属性、方法、生命周期等内容。组合式使用的是函数式编程的风格,将组件拆分为可复用的逻辑单元,易于维护和复用。
在使用选项式编写组件时,一个组件的所有选项都需要编写在同一个对象中,很容易造成代码冗长、复杂的情况,同时也不利于组件的重用和测试。而组合式则可以更加灵活的组合不同的逻辑单元,实现组件的高内聚、低耦合。
总的来说,选项式和组合式都有各自的优缺点,选项式更加面向对象和传统,适合对传统编程方式较为熟悉的开发人员;组合式更加函数式和灵活,适合对函数式编程方式有一定了解的开发人员。