为什么要使用composition API

最新推荐文章于 2026-04-07 22:10:48 发布

原创最新推荐文章于 2026-04-07 22:10:48 发布 · 2.8k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js

Vue3的CompositionAPI旨在解决大型组件中代码组织混乱的问题，提高代码的可读性和可维护性。它根据逻辑功能组织代码，将同一功能的代码集中在一起，便于重用和管理。相比OptionAPI的mixins，CompositionAPI避免了命名冲突，使代码结构更加清晰。通过CompositionAPI，开发者可以更高效地复用和组织复杂组件的逻辑。

一、什么是Composition API

我们要先了解一下vue2 中是如何组织代码的。当我们需要某个功能时，需要把功能中的代码差分为不同的部分放在对应的位置上。
当我们代码很少时，使用option API 结构会很清晰，可是在大型组件中功能越来越多，代码增加脚本越来越臃肿，并且同一个功能的代码会拆分为不同的部分散落在脚本不同位置会使代码难以阅读，难以维护。所以Composition API就时来解决这个问题。
在这里插入图片描述

代码表示

export default{
	data(){
		return{
			//功能A
			//功能B
			//更多功能
			//更多功能
		}
	},
	methods:{
		//功能A
		//功能B
		//更多功能
		//更多功能
	},
	computed:{
		//功能A
		//更多功能
		//更多功能
	},
	watch:{
		//功能B
		//更多功能
		//更多功能
	}
}