Vue 3的Composition API和vue2的不同之处

        Vue 3的Composition API是Vue.js框架的一个重要更新,它提供了一种新的组件逻辑组织和复用方式。在Vue 2中,我们通常使用Options API(data、methods、computed等)来组织组件的逻辑,但这种组织方式在处理复杂组件时可能会导致代码分散和难以维护。Composition API的引入旨在解决这些问题,提供了一种更加灵活和高效的代码组织方式。
        在本篇文章中,我们将详细介绍Vue 3的Composition API与Vue 2的不同之处,并通过代码例子来展示其用法。


        一、响应式系统的变化
        Vue 2使用Object.defineProperty来实现响应式系统,而Vue 3引入了Proxy-based响应式系统。Proxy可以直接监听对象和数组的变化,而不需要像Vue 2那样为每个属性定义getter和setter。这使得Vue 3的响应式系统更加高效,特别是在处理大型数据集时。
        在Vue 2中,我们通常使用this来访问组件的响应式数据和方法。而在Vue 3的Composition API中,我们使用ref和reactive来创建响应式数据,使用setup函数来组织组件的逻辑。
        二、setup函数
        在Vue 3中,每个组件都可以定义一个setup函数,它是组件生命周期的一部分,在组件实例创建之前执行。setup函数是使用Composition API组织组件逻辑的地方,它接收两个参数:props和context。
        props是一个对象,包含了父组件传递给子组件的所有属性。context是一个普通的JavaScript对象,包含了attrs、slots和emit三个属性,分别用于访问组件的属性、插槽和事件。
        在setup函数中,我们可以使用ref和reactive来创建响应式数据,使用computed和watch来创建计算属性和侦听器,以及使用生命周期钩子函数来处理组件的生命周期事件。
        三、ref和reactive
        在Vue 3中,我们可以使用ref和reactive来创建响应式数据。ref用于创建一个响应式的引用对象,它可以是基本数据类型或对象类型。reactive用于创建一个响应式的对象,它只能是对象类型。
        下面是一个使用ref和reactive的例子:


import { ref, reactive } from 'vue';
export default {setup() {const count = ref(0);const state = reactive({name: 'Vue 3',age: 3});function increment() {count.value++;}return {count,state,increment};}
};


       

         四、computed和watch
        在Vue 3中,我们可以使用computed和watch来创建计算属性和侦听器。computed用于创建一个计算属性,它接收一个getter函数,并返回一个不可变的响应式引用对象。watch用于侦听一个响应式数据的变化,并在数据变化时执行一个回调函数。
        下面是一个使用computed和watch的例子:


import { ref, computed, watch } from 'vue';
export default {setup() {const count = ref(0);const doubled = computed(() => count.value * 2);watch(count, (newValue, oldValue) => {console.log(`Count changed from ${oldValue} to ${newValue}`);});function increment() {count.value++;}return {count,doubled,increment};}
};


        五、生命周期钩子函数
        在Vue 3中,我们可以使用生命周期钩子函数来处理组件的生命周期事件。生命周期钩子函数与Vue 2中的生命周期钩子类似,但需要从'vue'包中导入。
        下面是一个使用生命周期钩子函数的例子:


import { onMounted, onUpdated, onUnmounted } from 'vue';
export default {setup() {onMounted(() => {console.log('Component mounted');});onUpdated(() => {console.log('Component updated');});onUnmounted(() => {console.log('Component unmounted');});return {};}
};


        六、Composition API的优势
        Vue 3的Composition API相比于Vue 2的Options API具有以下优势:
        1. 逻辑复用:通过Composition API,我们可以将相同逻辑的代码片段组合在一起,而不必遵循Options API的固定结构。这极大地提高了代码的可读性和可维护性。
        2. 类型支持:Vue 3的Composition API在设计时就考虑了TypeScript的支持,提供了更好的类型支持,使得在使用TypeScript时可以获得更好的开发体验。
        3. 灵活性:Composition API提供了一种更加灵活的代码组织方式,使得开发者可以更好地组织和复用组件逻辑。
        总结
        Vue 3的Composition API是Vue.js框架的一个重要更新,它提供了一种新的组件逻辑组织和复用方式。通过setup函数、ref、reactive、computed、watch等API,我们可以更加灵活地组织和复用组件逻辑,提高代码的可读性和可维护性。Composition API的引入使得Vue 3在处理复杂组件逻辑时更加得心应手。此外,Composition API 还改善了类型支持,使得 Vue 3 与 TypeScript 的结合更加紧密,为大型项目和团队开发提供了更好的支持。
        七、与 Options API 的对比
        Vue 2 中的 Options API 是基于组件选项的组织方式,例如 `data`, `methods`, `computed`, `watch`, `lifecycle hooks` 等。每个选项都有自己的用途,而且它们是相互独立的。这种组织方式在简单组件中工作得很好,但在大型或复杂的组件中,可能会导致以下问题:
        1. 逻辑分散:相关的逻辑被分割到不同的选项中,使得理解和维护变得更加困难。
        2. 代码重用:在 Options API 中,代码重用通常需要使用混合(mixins)或高阶组件(Higher-Order Components, HOCs),这些方法都有其局限性,如命名空间冲突、隐式的依赖关系等。
        相比之下,Composition API 允许开发者将相关的逻辑放在一起,无论是计算属性、侦听器还是生命周期钩子,都可以在 `setup` 函数中声明和使用。这样,代码的组织更加清晰,重用也更加容易。
        八、迁移到 Composition API
        对于现有的 Vue 2 应用程序,迁移到 Vue 3 和 Composition API 并不是一个一键转换的过程。虽然 Vue 3 提供了兼容性构建,允许开发者逐步迁移,但迁移过程中仍需要手动调整代码。以下是一些迁移到 Composition API 时的建议:
        1. 逐步迁移:不需要一次性迁移整个应用程序。可以逐个组件地进行迁移,同时保持其他部分使用 Options API。
        2. 重构复杂组件:首先考虑重构那些逻辑复杂、难以维护的组件。
        3. 利用迁移工具:Vue 3 提供了一些迁移工具和指南,可以帮助开发者更顺利地完成迁移。
        九、示例:计数器组件
        下面是一个简单的计数器组件,分别使用 Vue 2 的 Options API 和 Vue 3 的 Composition API 实现。

//Vue 2 with Options API:export default {data() {return {count: 0};},methods: {increment() {this.count++;}},mounted() {console.log('Component mounted');}
};//Vue 3 with Composition API:import { ref, onMounted } from 'vue';
export default {setup() {const count = ref(0);function increment() {count.value++;}onMounted(() => {console.log('Component mounted');});return {count,increment};}
};


        十、结论
        Vue 3 的 Composition API 为 Vue.js 带来了新的活力,它不仅解决了 Vue 2 中的一些问题,还提供了更多的灵活性和强大的类型支持。虽然迁移到新的 API 可能需要一些努力,但长远来看,这将使代码更加清晰、可维护,并为未来的项目开发打下坚实的基础。

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

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

相关文章

Czkawka 一款开源、免费的多功能重复文件清理工具,支持多平台

Czkawka (波兰语为 "打嗝")是一款简单、快速、免费的多功能重复文件清理工具,支持空文件、相似图像/视频/音频、损坏/无效文件的查找。 它扫描速度极快,并且适配 Linux、Windows、macOS、FreeBSD 等多个平台、支持中文。 &#x1…

bert 相似度任务训练简单版本,faiss 寻找相似 topk

目录 任务 代码 train.py predit.py faiss 最相似的 topk 数 任务 使用 bert-base-chinese 训练相似度任务,参考:微调BERT模型实现相似性判断 - 知乎 参考他上面代码,他使用的是 BertForNextSentencePrediction 模型,Bert…

紫光展锐T618_4G安卓核心板方案定制

紫光展锐T618核心板是一款采用纯国产化方案的高性能产品,搭载了开放的智能Android操作系统,并集成了4G网络,支持2.5G5G双频WIFI、蓝牙近距离无线传输技术以及GNSS无线定位技术。 展锐T618核心板应用旗舰级 DynamlQ架构 12nm 制程工艺&#x…

掌握PDF全面指南:Python开发者的高效编程技巧

掌握PDF全面指南:Python开发者的高效编程技巧 简介PDF基础知识PDF的结构常见用途PDF在开发中的挑战 PDF处理库介绍PyPDF2ReportLabPDFMiner辅助库 读取和分析PDF文件使用PyPDF2读取PDF文件提取PDF中的文本和元数据分析PDF结构和内容 编辑和修改PDF文件合并多个PDF文…

OSPF故障排查,这10大技巧是个网工都在用!

中午好,我的网工朋友。 OSPF这个名词网工们都不陌生吧。 OSPF,即开放式最短路径优先(Open Shortest Path First,OSPF)是广泛使用的一种动态路由协议。 它属于链路状态路由协议,具有路由变化收敛速度快、…

【RISC-V 指令集】RISC-V 向量V扩展指令集介绍(二)-向量元素到向量寄存器状态的映射

1. 引言 以下是《riscv-v-spec-1.0.pdf》文档的关键内容: 这是一份关于向量扩展的详细技术文档,内容覆盖了向量指令集的多个关键方面,如向量寄存器状态映射、向量指令格式、向量加载和存储操作、向量内存对齐约束、向量内存一致性模型、向量…

Python爬取网站视频资源

思路: 在界面找到视频对应的html元素位置,观察发现视频的url为https://www.pearvideo.com/video_视频的id,而这个id在html中的href中,所以第一步需要通过xpath捕获到所需要的id 在https://www.pearvideo.com/video_id的页面&…

LabVIEW非接触式电阻抗层析成像系统

LabVIEW非接触式电阻抗层析成像系统 非接触式电阻抗层析成像(NEIT)技术以其无辐射、非接触、响应速度快的特点,为实时监测提供了新的解决方案。基于LabVIEW的电阻抗层析成像系统,实现了数据的在线采集及实时成像,提高…

记一次dockerfile无法构建问题追溯

我有一个dockerfile如下: ENTRYPOINT ["/sbin/tini","-g", "--"] CMD /home/scrapy/start.sh 我原本的用意是先启动tini,再执行下面的cmd命令启动start.sh。 为啥要用tini? 因为我的这个docker…

如何选择程序员职业赛道

目录 前言1 个人技能分析1.1 技术栈评估1.2 经验积累1.3 数据科学能力 2 兴趣与价值观2.1 用户交互与界面设计2.2 复杂问题解决与系统优化 3 长期目标规划4 市场需求分析4.1 人工智能和云计算4.2 前沿技术趋势 5 就业前景5.1 前端在创意性公司中的应用5.2 后端在大型企业中的广…

Windows Docker 部署 MySQL

部署 MySQL 打开 Docker Desktop,切换到 Linux 容器。然后在 PowerShell 执行下面命令,即可启动一个 MySQL 服务。这里安装的是 8.3.0 Tag版本,如果需要安装其他或者最新版本,可以到 Docker Hub 进行查找。 docker run -itd --n…

YOLO v9训练自己数据集

原以为RT-DETR可以真的干翻YOLO家族,结果,!!!! 究竟能否让卷积神经网络重获新生? 1.数据准备 代码地址:https://github.com/WongKinYiu/yolov9 不能科学上网的评论区留言 数据集…

Web前端---表格和表单

1.表格概述 表格标记&#xff1a;<table></table> 表格标题标记&#xff1a;<caption></caption> 表头&#xff1a;<th></th>------heading 行标记&#xff1a;<tr></tr>-----r是row 列标记&#xff1a;<td></t…

HQL,SQL刷题,尚硅谷

目录 相关表数据&#xff1a; ​编辑 题目及思路解析&#xff1a; 复杂查询&#xff0c;子查询 1、查询所有课程成绩均小于60分的学生的学号、姓名 2、查询没有学全所有课的学生的学号、姓名 3、查询出只选修了三门课程的全部学生的学号和姓名 总结归纳&#xff1a; 知识补充&a…

JavaWeb Tomcat启动、部署、配置、集成IDEA

web服务器软件 服务器是安装了服务器软件的计算机&#xff0c;在web服务器软件中&#xff0c;可以部署web项目&#xff0c;让用户通过浏览器来访问这些项目。 Web服务器是一个应用程序&#xff08;软件&#xff09;&#xff0c;对HTTP协议的操作进行封装&#xff0c;使得程序…

【C语言】Leetcode 876. 链表的中间节点

主页&#xff1a;17_Kevin-CSDN博客 专栏&#xff1a;《Leetcode》 题目 通过题目的要求可以判断出有两种示例要解决&#xff0c;一种是偶数节点的链表&#xff0c;一种是奇数节点的链表&#xff0c;应对这两种情况我们需要使程序对二者都可以兼容。 解决思路 struct ListNode…

吴恩达机器学习笔记:第5周-9 神经网络的学习2(Neural Networks: Learning)

目录 9.4 实现注意&#xff1a;展开参数9.5 梯度检验9.6 随机初始化9.7 综合起来9.8 自主驾驶 9.4 实现注意&#xff1a;展开参数 在上一段视频中&#xff0c;我们谈到了怎样使用反向传播算法计算代价函数的导数。在这段视频中&#xff0c;我想快速地向你介绍一个细节的实现过…

java八股文复习-----2024/03/03

1.接口和抽象类的区别 相似点&#xff1a; &#xff08;1&#xff09;接口和抽象类都不能被实例化 &#xff08;2&#xff09;实现接口或继承抽象类的普通子类都必须实现这些抽象方法 不同点&#xff1a; &#xff08;1&#xff09;抽象类可以包含普通方法和代码块&#x…

Socket网络编程(四)——点对点传输场景方案

目录 场景如何去获取到TCP的IP和Port&#xff1f;UDP的搜索IP地址、端口号方案UDP搜索取消实现相关的流程&#xff1a;代码实现逻辑服务端实现客户端实现UDP搜索代码执行结果 TCP点对点传输实现代码实现步骤点对点传输测试结果 源码下载 场景 在一个局域网当中&#xff0c;不知…

LabVIEW齿轮传动健康状态静电在线监测

LabVIEW齿轮传动健康状态静电在线监测 随着工业自动化的不断发展&#xff0c;齿轮传动作为最常见的机械传动方式之一&#xff0c;在各种机械设备中发挥着至关重要的作用。然而&#xff0c;齿轮在长期运行过程中易受到磨损、变形等因素影响&#xff0c;进而影响整个机械系统的稳…