选项式API和组合式API

简介

        Vue 3支持选项式API组合式API其中,选项式API是从Vue 2开始使用的一种写法,而Vue 3新增了组合式API的写法。

选项式API

        选项式API是一种通过包含多个选项对象来描述组件逻辑的API,其常用的选项包括datamethodscomputedwatch等。

        格式:

<script>export default {data() {return { // 定义数据 }},methods: { // 定义方法 },computed: { // 定义计算属性 },watch: { // 定义侦听器 }}
</script>

组合式API

        相比于选项式API,组合式API是将组件中的数据、方法、计算属性、侦听器等代码全部组合在一起,写在setup()函数中。

        格式:

<script>
import { computed, watch } from 'vue'
export default {setup() {const 数据名 = 数据值const 方法名 = () => {}const 计算属性名 = computed(() => {})watch(侦听器的来源, 回调函数, 可选参数)return { 数据名, 方法名, 计算属性名 }}
}
</script>

        Vue还提供了setup语法糖,用于简化组合式API的代码。使用setup语法糖时,组合式API的语法格式如下:

<script setup>
import { computed, watch } from 'vue'
// 定义数据
const 数据名 = 数据值
// 定义方法
const 方法名 = () => {}
// 定义计算属性
const 计算属性名 = computed(() => {})
// 定义侦听器
watch(侦听器的来源, 回调函数, 可选参数)
</script>

选项式API和组合式API的关系

        Vue提供的选项式API和组合式API这两种写法可以覆盖大部分的应用场景,它们是同一底层系统所提供的两套不同的接口选项式API是在组合式API的基础上实现的

        企业在开发大型项目时,随着业务复杂度的增加,代码量会不断增

        如果使用选项式API,整个项目逻辑不易阅读和理解而且查找对应功能的代码会存在一定难度

        如果使用组合式API,可以将项目的每个功能的数据方法放到一起,这样不管项目的大小,都可以快速定位到功能区域的相关代码,便于阅读和维护。同时组合式API可以通过函数来实现高效逻辑复用,这种形式更加自由,需要开发者有较强的代码组织能力和拆分逻辑能力。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/213331.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

springcloud系列文章

springcloud之微服务简介 。 springcloud之自我介绍 。 springcloud之项目实战环境准备 。 springcloud之项目实战搭建单体 。 springcloud之项目实战服务治理 。

fastchat启动大模型,并使用api访问

简介 本文介绍使用fastchat启动大模型&#xff0c;并通过远程访问获取内容。 模型&#xff1a;Baichuan2-7B 步骤 1、启动命令&#xff0c;我直接写到了脚本里面 python3 -m fastchat.serve.controller > fastchat.log 2>&1 &python3 -m fastchat.serve.mod…

《opencv实用探索·十六》opencv直方图计算calcHist函数解析

直方图理解&#xff1a; &#xff08;对于8位灰度图像亮度/灰度为(0-255)&#xff0c;12位灰度图像亮度/灰度为(0-4095)&#xff09; 以8位图像为例&#xff0c;亮度分为0到255共256个数值&#xff0c;数值越大&#xff0c;代表的亮度越高。其中0代表纯黑色的最暗区域&#xff…

【Docker二】docker网络模式、网络通信、数据管理、资源控制

目录 一、docker网络模式&#xff1a; 1、概述 2、docker网络实现原理&#xff1a; 3、docker的网络模式&#xff1a; 3.1、bridge模式&#xff1a; 3.2、host模式&#xff1a; 3.3、container模式&#xff1a; 3.4、none模式&#xff1a; 3.5、自定义网络模式&#x…

【开题报告】基于SpringBoot的平遥牛肉销售平台的设计与实现

1.选题背景 平遥牛肉是中国山西省平遥地区的一种特色美食&#xff0c;因其独特的风味和口感而享有盛誉。随着互联网的快速发展&#xff0c;电子商务已经成为人们购买商品和服务的主要途径之一。在这个背景下&#xff0c;建立一个基于Spring Boot的平遥牛肉销售平台可以为消费者…

青光眼术后险致盲,辗转多院幸于成都爱尔眼科重获光明

“我在一家医院诊断为青光眼&#xff0c;然后就做了青光眼手术。结果没有成功&#xff0c;后面产生了脉络膜脱离&#xff0c;从4月到10月底一直没有恢复&#xff0c;我去找医生结果那家医院的医生让我等……等着恢复……”张先生是一位青光眼术后患者&#xff0c;一场手术给他带…

TailwindCSS 配置可视化检查器

问题 TailwindCSS 框架为我们提供了大量默认的类和属性&#xff0c;而且开发者也能够自定义类和配置。 对于初学者来说&#xff0c;这些配置其实是比较复杂的&#xff0c;这也是tailwindcss最大的入手成本&#xff0c;开发者的记忆负担和心智负担也都比较大。 有没有办法能够…

谷歌Gemini被骂了?让子弹飞一会儿;如何构建高效RAG系统;Pika是腐朽王朝的颠覆者;AGI将重塑组织架构;对话月之暗面杨植麟 | ShowMeAI日报

&#x1f440;日报&周刊合集 | &#x1f3a1;生产力工具与行业应用大全 | &#x1f9e1; 点赞关注评论拜托啦&#xff01; &#x1f440; 淘宝 X D.Design 堆友 | 淘宝年终好价节 AIGC 创作大赛 https://d.design/competition/taobao-promotion 淘宝携手堆友联合打造了「淘…

python用turtle画樱花飘落,python代码画樱花代码

这篇文章主要介绍了python用turtle画樱花飘落&#xff0c;具有一定借鉴价值&#xff0c;需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获&#xff0c;下面让小编带着大家一起了解一下。 1、python画樱花树代码为&#xff1a; import turtle as T import random import…

基于ssm保险业务管理系统设计与实现论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本保险业务管理系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据信息…

银行数字化转型导师坚鹏:兴业生活APP运营之道

基于招商银行案例研究的兴业生活APP运营之道培训圆满结束 ——线上引流平台流量经营与变现 兴业银行股份有限公司&#xff08;简称“兴业银行”&#xff09;成立于1988年8月&#xff0c;2022年总资产9.27万亿元&#xff0c;是经国务院、中国人民银行批准成立的首批股份制商业银…

python画图:legend图例相关

import matplotlib.pyplot as plt plt.legend(loclower right, fontsize12, frameonTrue, fancyboxTrue, framealpha0.2, borderpad0.3,ncol1, markerfirstTrue, markerscale1, numpoints1, handlelength3.5)#loc:图例位置,可取(‘best’, ‘upper right’, ‘upper left’, ‘…

在Ascend昇腾硬件用npu加速paddleLite版本ocr(nnadapter)

在Ascend昇腾硬件用npu加速paddleLite版本ocr&#xff08;nnadapter&#xff09; 参考文档* nnadapter参考文档地址* 华为昇腾 NPU参考文档地址* PaddleLite的CAPI参考文档 一.确保cpu版本运行正常二.编译Ascend上npu加速库三.跑通npu加速版本Demo1.Demo下载地址2.参考手册网址…

Jupyter Notebook工具

Jupyter Notebook 是一个交互式的笔记本环境&#xff0c;允许用户以网页形式编写和分享代码、文本、图像以及其它多媒体内容。它支持超过 40 种编程语言&#xff0c;最常用的是 Python。 以下是 Jupyter Notebook 工具的一些特点和用法&#xff1a; 1. 特点&#xff1a; 交互式…

vscode eide arm-gcc 编译环境搭建调试

安装cube&#xff0c;vscode 1.安装vscode插件 C/C Extension Pack Chinese (Simplified) (简体中文) Language Pack Cortex-Debug Embedded IDE 工具链设置 2.软件工程生成 调试 3.生成工程&#xff0c;导入工程 4. 配置工程 编译完毕

【PTA刷题】 求子串(代码+详解)

【PTA刷题】 求子串(代码详解) 题目 请编写函数&#xff0c;求子串。 函数原型 char* StrMid(char *dst, const char *src, int idx, int len);说明&#xff1a;函数取源串 src 下标 idx 处开始的 len 个字符&#xff0c;保存到目的串 dst 中&#xff0c;函数值为 dst。若 len…

【W5500】关于使用外部网络变压器的原理图设计

直接上原理图 链接也放一个吧【链接】 按照这个画&#xff0c;我实验在立创EDA上打了一个实验过是可以用的~ 画出来的板子长这个样子【就不公开原理图和PCB了&#xff0c;这个板子还是很容易画的】~ 注意在立创上找对网口&#xff0c;要无变压器的网口&#xff0c;相比TB卖的那…

基于Springboot+Vue前后端分离的电影推荐系统(Java毕业设计)

大家好&#xff0c;我是DeBug&#xff0c;很高兴你能来阅读&#xff01;作为一名热爱编程的程序员&#xff0c;我希望通过这些教学笔记与大家分享我的编程经验和知识。在这里&#xff0c;我将会结合实际项目经验&#xff0c;分享编程技巧、最佳实践以及解决问题的方法。无论你是…

前端路由(front-end routing)和后端路由(back-end routing)的区别

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

渗透测试学习day8

文章目录 靶机&#xff1a;UnifiedTask1Task2Task3Task4 5-14解题过程Task5Task6Task7Task8Task9Task10Task11Task12Submit user flagSubmit root flag 靶机&#xff1a;Unified Task1 问题&#xff1a;前四个开放端口是哪一个&#xff1f; 22,6789,8080,8443nmap扫一下 T…