首页 前端知识 vue3 选项式 API 和组合式 API 区别

vue3 选项式 API 和组合式 API 区别

2024-05-31 19:05:21 前端知识 前端哥 527 764 我要收藏

Vue 3 选项式 API 和组合式 API 区别

选项式 API (Options API)

选项式 API,可以用包含多个选项的对象来描述组件的逻辑,例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上,它会指向当前的组件实例。
优点:
1.上手简单,位置固定
缺点:
一个功能往往需要在不同的vue配置项中定义属性和方法,比较分散,项目小还好,清晰明了,但是项目大了后,一个methods中可能包含很多个方法,往往分不清哪个方法对应着哪个功能,而且当你想要新增一个功能的时候你可能需要在 data,methods,computed,watch中都要写一些东西,但是这个时候每个选项里面的内容很多你需要上下来回的翻滚,特别影响效率。

vue3 如下

<template>
  
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from 'vue';
export default defineComponent({
  name: 'xxx',
  components: {},
  setup() {
    const state = reactive({
      checked: { path: '/', query: { id: 111 } },
    });
    onMounted(async () => {});
    return {
      ...toRefs(state),
    };
  },
});
</script>
组合式 API (Composition API)

组合式 API,可以使用导入的 API 函数来描述组件逻辑,是一系列 API 的集合,可以使用函数的方式书写 Vue 组件。
组合式 API 的风格是基于函数的组合,但组合式 API 并不是函数式编程。组合式 API 是以 Vue 中数据可变的、细粒度的响应性系统为基础的,而函数式编程通常强调数据不可变。

在单文件组件中,组合式 API 通常会与< script setup> 搭配使用。这个 setup attribute 是一个标识,告诉 Vue 需要在编译时进行一些处理,让我们可以更简洁地使用组合式 API。比如,< script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

优点:
Composition API最大的优点通俗的讲就是把跟一个功能相关的东西放在一个地方,它是目前最合理也是最容易维护的,你可以随时将功能的一部分拆分出去。你可以将每一个功能相关所有的东西比如methods,computed都放在如上图的function中,这个function可以独立的存在,可以放在一个TS文件中,也可在npm中单独发布,最终Composition API把他们组合起来

总结:更清晰,更好的逻辑复用,体积更小。

类似react hooks
缺点:
学习成本增加,思维改变

<template>
</template>
<script setup lang="ts">
import { defineProps } from 'vue';
const props = defineProps({
  /** autoplay  */
  xxx: {
    type: [String, Number],
    default: 3000,
  },
});
</script>
<style lang="scss" scoped>
</style>

如果写组件的话 建议 组合式 API (Composition API) 假如配合storybook 可以更好的支持以及更清晰!!!。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10179.html
标签
评论
发布的文章

JSON&yaml和Properties

2024-06-06 10:06:54

JavaScript中的JSON.stringify()

2024-06-06 10:06:52

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!