vue选项式API和组合式API区别-备忘

Vue.js 的选项式API和组合式API是两种不同的编写Vue组件的方式，它们各自有不同的特点和适用场景：

选项式API (Options API)

这是 Vue.js 最初的API设计方式，也是最为广泛使用的编程模型。在选项式API中，一个Vue组件由一系列可选的选项组成，如 data、props、methods、computed、watch 等。这些选项在组件的定义对象中以属性的形式列出。

例如：

export default {props: {message: String},data() {return {localMessage: 'Hello from component'}},computed: {combinedMessage() {return this.message + ' ' + this.localMessage;}},methods: {greet() {console.log(this.combinedMessage);}},mounted() {this.greet();}
}

组合式API (Composition API)

Vue 3 引入的新编程模式，它允许开发者以更加灵活和可复用的方式组织组件的逻辑。组合式API的核心是 setup 函数，该函数接收两个参数 props 和 context，并在函数内部通过 ref、reactive、computed、watch 等函数来声明和管理组件的状态和行为。

例如：

import { ref, computed, onMounted } from 'vue';export default {props: {message: String},setup(props) {const localMessage = ref('Hello from component');const combinedMessage = computed(() => {return props.message + ' ' + localMessage.value;});function greet() {console.log(combinedMessage.value);}onMounted(greet);return {localMessage,greet};}
}

区别：

模块性与复用性：组合式API通过函数式的编程方式使得逻辑片段更容易提取和复用，特别是在大型应用中。
代码组织：在选项式API中，状态和方法分布在不同的选项中，而组合式API将所有逻辑集中在一个 setup 函数中，可以根据逻辑相关性自由组织代码。
响应式API：组合式API提供了更精细的响应式控制，如 ref 和 reactive，可以直接在JavaScript表达式中使用 .value 来访问响应式变量的值。
作用域：在组合式API中，可以直接在 setup 函数中访问 props 和 context，而不需要 this 关键字。
生命周期钩子：组合式API使用 onMounted、onUpdated、onBeforeUnmount 等新的生命周期钩子函数替代原有的 mounted、updated、beforeDestroy 等选项。