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

server/2024/9/23 20:06:30/

一、区别

设计思想:options API 偏向于填充式,规定了方法应该写在那里,比如 methods,computed,watch 等,而 compositionAPI 更灵活

使用方式:compositionAPI 全部写在 setup()中更灵活强大,optionsAPI 更加简明,适用于构建简单的组件

二、选项式API

Vue 2 中广泛使用的选项式 API 

1、组成

  • data:用于定义组件的数据。
  • methods:定义组件的方法。
  • computed:定义计算属性。
  • watch:用于监听数据变化。
  • mounted等生命周期钩子:在特定的组件生命周期阶段执行代码。

2、实例代码

javascript">   export default {data() {return {message: 'Hello World',};},methods: {updateMessage() {this.message = 'New Message';},},computed: {reversedMessage() {return this.message.split('').reverse().join('');},},mounted() {console.log('Component mounted.');},};

三、组合式API

Vue 3 引入的组合式 API 提供了一种更加灵活和可维护的方式来组织组件逻辑。

1、特点

  • setup函数是入口点,在组件创建之前被调用。
  • 使用refreactive创建响应式数据。
  • 可以将相关的逻辑代码集中在一起,提高代码的可读性和可维护性。

2、实例代码

javascript">   import { ref, computed } from 'vue';export default {setup() {const message = ref('Hello World');const updateMessage = () => {message.value = 'New Message';};const reversedMessage = computed(() => message.value.split('').reverse().join(''));return {message,updateMessage,reversedMessage,};},};

http://www.ppmy.cn/server/120961.html

相关文章

【5】AT32F437 OpenHarmony轻量系统移植教程(2)

开源地址:https://gitee.com/AT32437_OpenHarmony 学习本文档的意义 1.学习移植OpenHarmony轻量系统到AT32全系列mcu上,本文档移植的具体型号为AT32F437ZMT7 2.学习OpenHarmony轻量系统开发 3.适配vprintf, vfprintf, printf, snprintf 和sprintf 1…

Android外接USB扫码枪

前言 公司的设备以前接入的都是串口的扫码头,优点是直接通过串口读取流里面的数据就OK了,缺点是你需要知道每一款扫码器的型号以获取波特率及Android设备的串口地址。因为现在usb扫码器越来越方便且即插即用,不需要额外供电以及价格便宜等特…

【60天备战2024年11月软考高级系统架构设计师——第21天:系统架构设计原则——高内聚低耦合】

在软件架构设计中,“高内聚低耦合”是至关重要的设计原则,它能够提高系统的可维护性、可扩展性和灵活性。理解并实践这一原则可以帮助系统架构师在设计过程中构建出健壮的系统。 什么是高内聚? 高内聚指的是模块内部的功能相关性强&#xf…

【Docker】基于docker compose部署artifactory-cpp-ce服务

基于docker compose部署artifactory-cpp-ce服务 1 环境准备2 必要文件创建与编写3 拉取镜像-创建容器并后台运行4 访问JFog Artifactory 服务 1 环境准备 docker 以及其插件docker compose ,我使用的版本如下图所示: postgresql 的jdbc驱动, 我使用的是…

【艾思科蓝】“从零到一:使用IntelliJ IDEA打造你的梦幻HTML项目“

【JPCS独立出版】2024年工业机器人与先进制造技术国际学术会议(IRAMT 2024)_艾思科蓝_学术一站式服务平台 更多学术会议请看 学术会议-学术交流征稿-学术会议在线-艾思科蓝 目录 引言:为何选择IntelliJ IDEA? 第一步&#xff1a…

分布式系统实战经验

分布式系统是现代软件架构的核心部分,它通过多个计算节点协同工作来处理大规模数据和请求,提供高可用性、可扩展性和容错能力。在实际开发和运维中,构建分布式系统需要考虑多方面的挑战。以下是一些在分布式系统中的实战经验: 1.…

Elasticsearch 分片迁移与移除集群节点操作

Elasticsearch 分片迁移与移除集群节点操作 问题背景 在单台服务器上部署了 7 个 Elasticsearch 节点,分别为 es-node1 到 es-node7,端口从 9201 到 9207。每个节点都承载大量数据,但没有设置副本分片。由于多个节点共享同一台服务器的硬件…

vue 中互相不关联的两个组件怎么进行通信(数据传输)

1、Vuex Vuex 是 Vue 官方的状态管理模式与库。通过使用 Vuex,可以将组件间共享的数据存储在一个全局的状态树中,任何组件都可以读取这个状态,通过提交 mutations 或 dispatch actions 来修改状态。 2、Event Bus (事件总线) 创建一个全局的…