Vue 2 和 Vue 3 在组件的组织方式上有一些重要的区别，主要体现在选项式 API（Options API）和组合式 API（Composition API）上。下面我将详细介绍这两种 API 的区别，并提供相应的代码示例。
选项式 API (Options API)
选项式 API 是 Vue 2 中最常用的 API 风格，它通过选项来组织组件的逻辑。每个选项（如 data、methods、computed 等）都有特定的作用域和生命周期。
Vue 2 选项式 API 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 2 Options API Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button @click="increment">Increment</button>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
message: 'Hello, Vue 2!'
};
},
methods: {
increment() {
this.message += '!';
}
}
});
</script>
</body>
</html>组合式 API (Composition API)
组合式 API 是 Vue 3 引入的一种新的 API 风格，它允许你更灵活地组织和重用逻辑。通过 setup 函数，你可以更直观地管理组件的状态和逻辑。
Vue 3 组合式 API 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 3 Composition API Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button @click="increment">Increment</button>
</div>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
const message = ref('Hello, Vue 3!');
const increment = () => {
message.value += '!';
};
return {
message,
increment
};
}
}).mount('#app');
</script>
</body>
</html>区别总结
-
组织方式：
- 选项式 API：通过不同的选项（如
data、methods、computed等）来组织组件的逻辑。 - 组合式 API：通过
setup函数来组织组件的逻辑，更加灵活和模块化。
- 选项式 API：通过不同的选项（如
-
状态管理：
- 选项式 API：状态管理分散在不同的选项中，例如
data用于管理数据，methods用于定义方法。 - 组合式 API：状态管理集中在
setup函数中，使用ref或reactive来管理响应式数据。
- 选项式 API：状态管理分散在不同的选项中，例如
-
逻辑复用：
- 选项式 API：逻辑复用较为困难，通常需要借助混入（mixins）或其他方式。
- 组合式 API：逻辑复用非常方便，可以通过自定义组合函数（composables）来实现。
-
学习曲线：
- 选项式 API：对于初学者来说，学习曲线较为平缓，因为它的结构清晰且直观。
- 组合式 API：对于有经验的开发者来说，学习曲线较陡峭，但提供了更多的灵活性和可维护性。
代码框架对比
Vue 2 选项式 API 框架
javascript
new Vue({
el: '#app',
data() {
return {
// 响应式数据
message: 'Hello, Vue 2!'
};
},
methods: {
// 方法
increment() {
this.message += '!';
}
},
computed: {
// 计算属性
reversedMessage() {
return this.message.split('').reverse().join('');
}
},
watch: {
// 监听器
message(newVal, oldVal) {
console.log(`message changed from ${oldVal} to ${newVal}`);
}
},
created() {
// 生命周期钩子
console.log('Component created');
},
mounted() {
// 生命周期钩子
console.log('Component mounted');
}
});Vue 3 组合式 API 框架
const { createApp, ref, computed, watch, onCreated, onMounted } = Vue;
createApp({
setup() {
// 响应式数据
const message = ref('Hello, Vue 3!');
// 方法
const increment = () => {
message.value += '!';
};
// 计算属性
const reversedMessage = computed(() => {
return message.value.split('').reverse().join('');
});
// 监听器
watch(message, (newVal, oldVal) => {
console.log(`message changed from ${oldVal} to ${newVal}`);
});
// 生命周期钩子
onCreated(() => {
console.log('Component created');
});
onMounted(() => {
console.log('Component mounted');
});
return {
message,
increment,
reversedMessage
};
}
}).mount('#app');