Vue 3 的＜script setup＞ 和 Vue 2 的 Options API的关系

1. 设计理念的差异

• Vue 2 的 Options API：
  基于“选项式”设计，将组件逻辑按照功能（如 data、methods、computed、watch、生命周期钩子等）拆分为不同的选项对象，所有逻辑通过 this 关联到组件实例。
  优点是结构清晰，适合简单组件；但复杂组件中，同一业务逻辑可能分散在多个选项中（如一个表单验证逻辑可能涉及 data、methods、watch），维护成本较高。

• <script setup>：
  基于 Vue 3 推出的组合式 API（Composition API），通过“逻辑组合”的方式组织代码，允许将相关的逻辑（如数据、方法、副作用）聚合在一起，而非按选项拆分。
  简化了组合式 API 的写法（无需手动返回变量、自动暴露给模板等）

2、实例对比

以下通过“计数器”和“用户信息展示”两个例子，直观对比两者的写法差异。

例 1：基础计数器（简单逻辑）

Vue 2 Options API 写法：

<template><div><p>计数：{{ count }}</p><button @click="increment">+1</button></div>
</template><script>
export default {// 响应式数据data() {return {count: 0}},// 方法methods: {increment() {this.count++ // 通过 this 访问数据}},// 生命周期mounted() {console.log('组件挂载完成，初始计数：', this.count)}
}
</script>

Vue 3 <script setup> 写法：

<template><div><p>计数：{{ count }}</p><button @click="increment">+1</button></div>
</template><script setup>
// 导入响应式 API
import { ref, onMounted } from 'vue'// 响应式数据（替代 data）
const count = ref(0)// 方法（直接定义，无需包裹在 methods 中）
const increment = () => {count.value++ // 通过 .value 访问 ref 数据
}// 生命周期（替代 mounted 选项）
onMounted(() => {console.log('组件挂载完成，初始计数：', count.value)
})
</script>

核心差异：

• Options API 中数据和方法需放在固定选项中，通过 this 关联；
• <script setup> 中直接定义变量和函数，通过 ref 等 API 创建响应式数据，生命周期通过导入的钩子函数实现。

例 2：用户信息展示（含计算属性和 props）

Vue 2 Options API 写法：

<template><div><p>用户名：{{ fullName }}</p><p>年龄：{{ age >= 18 ? '成年' : '未成年' }}</p></div>
</template><script>
export default {// 接收父组件传参props: {firstName: String,lastName: String,age: Number},// 计算属性computed: {fullName() {return `${this.firstName} ${this.lastName}` // 依赖 props}},// 监听数据变化watch: {age(newVal) {console.log('年龄变化：', newVal)}}
}
</script>

Vue 3 <script setup> 写法：

<template><div><p>用户名：{{ fullName }}</p><p>年龄：{{ age >= 18 ? '成年' : '未成年' }}</p></div>
</template><script setup>
import { computed, watch } from 'vue'// 接收父组件传参（替代 props 选项）
const props = defineProps({firstName: String,lastName: String,age: Number
})// 计算属性（替代 computed 选项）
const fullName = computed(() => {return `${props.firstName} ${props.lastName}` // 直接访问 props
})// 监听（替代 watch 选项）
watch(() => props.age,(newVal) => {console.log('年龄变化：', newVal)}
)
</script>