淘宝网站怎么做的好看,photoshop免费版,网站做公司简介怎么做,dedecms 做网站前言
如果你刚开始学习 Vue 3#xff0c;你可能会听到两个词#xff1a;选项式 API 和 组合式 API。它们是什么#xff1f;有什么区别#xff1f;应该用哪个#xff1f;这篇文章用最简单的方式讲清楚。 一、什么是选项式 API#xff1f;
选项式 API 是 Vue 2 时代的经典…前言如果你刚开始学习 Vue 3你可能会听到两个词选项式 API和组合式 API。它们是什么有什么区别应该用哪个这篇文章用最简单的方式讲清楚。一、什么是选项式 API选项式 API 是 Vue 2 时代的经典写法也是 Vue 3 仍然支持的写法。特点按类型分组代码按照data、methods、computed等选项分类export default { data() { return { count: 0, name: 张三 } }, methods: { add() { this.count }, sayHi() { console.log(我是 this.name) } }, computed: { double() { return this.count * 2 } }, mounted() { console.log(组件挂载了) } }关键点✅ 结构清晰新手友好✅ 每个选项有明确的用途❌ 相关的代码被分散到不同位置❌ 需要用this访问数据二、什么是组合式 API组合式 API 是 Vue 3 新增的写法更灵活、更强大。特点按功能分组相关的代码写在一起import { ref, computed, onMounted } from vue export default { setup() { // 计数相关功能 const count ref(0) const double computed(() count.value * 2) const add () { count.value } // 用户信息相关功能 const name ref(张三) const sayHi () { console.log(我是 name.value) } // 生命周期 onMounted(() { console.log(组件挂载了) }) return { count, double, add, name, sayHi } } }更简洁的script setup写法推荐script setup import { ref, computed, onMounted } from vue // 计数相关功能 const count ref(0) const double computed(() count.value * 2) const add () count.value // 用户信息相关功能 const name ref(张三) const sayHi () console.log(我是 name.value) // 生命周期 onMounted(() console.log(组件挂载了)) /script关键点✅ 相关代码组织在一起✅ 不需要this✅ 更容易复用逻辑Composables❌ 需要理解响应式 APIref、reactive三、核心区别this的使用选项式 API到处用thisexport default { data() { return { name: 张三, count: 0 } }, methods: { sayHi() { // 必须用 this 访问 data console.log(this.name) }, add() { // 必须用 this 访问其他数据 this.count } } }为什么需要this因为data、methods、computed写在不同的地方它们之间需要this来连接。组合式 API不需要thisimport { ref } from vue export default { setup() { const name ref(张三) const count ref(0) const sayHi () { // 直接用不需要 this console.log(name.value) } const add () { // 直接用不需要 this count.value } return { name, count, sayHi, add } } }为什么不需要this因为所有变量都在setup()函数的同一个作用域内就像普通 JavaScript 一样直接使用。四、生活比喻选项式 API 餐厅点餐菜单分类 - 前菜区 - 主菜区 - 甜品区 你需要的东西分散在不同区域 需要说我要主菜区的牛排组合式 API 自助餐所有东西都在一个台子上 你可以自由组合 - 牛排配薯条相关的一组 - 沙拉配汤相关的一组 需要什么直接拿五、完整对比示例示例一个用户信息表单选项式 APIexport default { data() { return { form: { username: , phone: , email: }, loading: false, rules: { username: [{ required: true, message: 请输入用户名 }] } } }, computed: { isValid() { return this.form.username this.form.phone } }, methods: { async submit() { this.loading true // 提交逻辑... this.loading false }, reset() { this.form.username this.form.phone this.form.email } } }组合式 APIscript setup import { ref, computed } from vue // 表单数据 const form ref({ username: , phone: , email: }) // 表单验证规则 const rules { username: [{ required: true, message: 请输入用户名 }] } // 加载状态 const loading ref(false) // 计算属性 const isValid computed(() { return form.value.username form.value.phone }) // 提交方法 const submit async () { loading.value true // 提交逻辑... loading.value false } // 重置方法 const reset () { form.value.username form.value.phone form.value.email } /script六、优缺点对比对比项选项式 API组合式 API上手难度⭐ 简单⭐⭐⭐ 需要学习新概念代码组织按类型分组按功能分组this 使用到处需要 this不需要 this逻辑复用Mixins容易冲突Composables清晰TypeScript支持一般支持很好代码量较多boilerplate 多较少适合场景简单组件、小项目复杂逻辑、大项目七、什么时候用哪个用选项式 API✅ 你刚学 Vue想要简单易懂✅ 组件逻辑简单代码量少✅ 团队成员更熟悉 Vue 2用组合式 API✅ 项目复杂逻辑多✅ 需要复用逻辑多个组件用同一套逻辑✅ 想要更好的 TypeScript 支持✅ 新项目没有历史包袱八、实际项目例子看看你项目中的代码stores/user.js组合式 APIimport { defineStore } from pinia; import { ref } from vue; export const useUserStore defineStore(user, () { // 状态 const user ref({}) const token ref() // 方法 function login(username, password) { // ... } function logout() { // ... } // 返回 return { user, token, login, logout } })为什么用组合式user、token、login、logout都是用户相关的功能放在一起逻辑清晰不需要this.user、this.token直接用九、总结核心区别一句话写法特点选项式 API代码按类型分类data、methods 分开用this连接组合式 API代码按功能分类相关的一起不用this我的建议新手先学选项式 API理解 Vue 的基本概念进阶转向组合式 API享受更好的代码组织新项目直接用组合式 API script setup十、学习资源Vue 3 官方文档 - 组合式 APIVue 3 风格指南有问题欢迎留言讨论
