vue实现的两种模式
Vue 实现的两种主要模式
Vue.js 作为前端框架，支持两种核心开发模式：选项式 API（Options API）和组合式 API（Composition API）。两者各有特点，适用于不同场景。
选项式 API (Options API)
选项式 API 是 Vue 的传统模式，通过定义对象属性的方式组织代码（如 data、methods、computed 等）。适合简单项目或初学者。
<template>
<button @click="increment">{{ count }}</button>
</template>
<script>
export default {
data() {
return { count: 0 };
},
methods: {
increment() {
this.count++;
}
}
};
</script>特点
- 逻辑按选项分类，结构清晰。
this指向组件实例，易于理解。- 生命周期钩子直接暴露（如
mounted）。
组合式 API (Composition API)
组合式 API 是 Vue 3 的推荐模式，通过 setup() 函数和响应式 API（如 ref、reactive）实现逻辑复用和灵活组织。适合复杂组件或团队协作。
<template>
<button @click="increment">{{ count }}</button>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const increment = () => count.value++;
return { count, increment };
}
};
</script>特点
- 逻辑按功能聚合，便于复用（如提取到
useCounter函数）。 - 减少
this使用，避免上下文绑定问题。 - 更好的 TypeScript 支持。
如何选择
- 选项式 API：适合小型项目或快速原型开发，学习曲线平缓。
- 组合式 API：适合中大型项目，需要逻辑复用或 TypeScript 集成时优先使用。
两种模式可混用，但推荐新项目以组合式 API 为主。
