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
等选项。