详解vue中的Options API和Composition API

前言

在vue中两种主要的 API 设计风格,分别是 Options APIComposition API。它们分别用于组织和管理组件的逻辑. 下面我来分别介绍一下这两种API的使用及区别

Options API

首先Options API是vue2中主要使用的API设计方式。它基于选项对象,将组件的配置分解为一系列的选项。每个选项对应于组件的不同功能,例如数据 (data)、生命周期钩子 (createdmounted 等)、方法 (methods) 等。但是这种开发方式在面对复杂组件时可能导致选项过多,难以维护。

示例

vue 复制代码
<template>
  <div>
    <p>{{ message }}</p>
     <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}
</script>

在上面这个示例中,在template部分,我们进行了数据绑定的操作,分别显示组件中的 messagecount 数据。并通过@click="increment" 监听按钮的点击事件,当按钮被点击时触发 increment 方法。

在 Options API 中,使用 data 选项来定义组件的数据,使用 methods 选项来定义组件的方法。在这个示例中,我们通过设计messagecount 的数据属性,通过 data 方法返回初始化的值;并通过increment 的方法,在按钮点击时将 count 的值加一。总的来说,在这个示例中,通过 data 选项定义数据,通过 methods 选项定义方法,然后在模板中进行数据绑定和事件绑定,构建了一个简单的计数器组件。

Composition API

Composition API是vue3中设计api的设计方法。他的目的是解决 Options API 的一些缺点,提供更灵活、可组合的组件逻辑复用。它基于函数,将组件逻辑划分为一组功能相关的函数,这些函数可以在组件中被自由组合和复用。Composition API 使用 setup 函数来组织组件逻辑。

示例

vue 复制代码
<template>
  <div>
    <p>{{ message }}</p>
    <p>Count:{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue!');
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return { message, count, increment };
  }
}
</script>

上面的示例中,在template部分,我们进行了与Option API一样的操作,都进行了数据绑定和事件绑定。不同的是,在script中,Composition API 中引入了 setup 函数,用于设置组件的配置。在 setup 函数内部,可以使用 Composition API 提供的函数,并提供了 ref 函数,用于创建响应式对象。

总的来说,这个示例展示了 vue3中 Composition API 的用法,通过 setup 函数和响应式函数(ref)来组织组件逻辑。这种方式相对于 vue2 Options API 更加灵活,特别适用于大型组件和逻辑的复用。

结语

两者的优劣比较:

在逻辑组织和逻辑复用方面,Composition API是优于Options API,因为Composition API几乎是函 数,会有更好的类型推断。 Composition API对 tree-shaking 友好,代码也更容易压缩。 Composition API中见不到this的使用,减少了this指向不明的情况。 如果是小型组件,可以继续使用Options API,也是十分友好的。

相关推荐
帅帅哥的兜兜1 小时前
react中hooks使用
前端·javascript·react.js
吞掉星星的鲸鱼2 小时前
使用高德api实现天气查询
前端·javascript·css
....4922 小时前
Vue3 + Element Plus + AntV X6 实现拖拽树组件
javascript·vue.js·elementui·antvx6
花花鱼4 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
TDengine (老段)6 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
再学一点就睡7 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
難釋懷9 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript
还是鼠鼠9 小时前
Node.js全局生效的中间件
javascript·vscode·中间件·node.js·json·express
马可奥勒留9 小时前
我的管理日记(2)——招聘
程序员
自动花钱机9 小时前
WebUI问题总结
前端·javascript·bootstrap·css3·html5