【vue】Vue2和Vue3中的代码逻辑复用对比(mixins、自定义hook):

文章目录

        • 一、前言:
        • 二、mixins:
            • 【1】mixins是什么?
            • 【2】mixins如何使用?
            • 【3】mixins的一些特性:
            • 【4】mixins的缺点:
        • 三、hook:
            • 【1】Vue3.x中的自定义hook函数是什么?
            • 【2】mixins和Composition API hook解决的区别:


一、前言:

mixins是Vue2.x Options API中常用的代码逻辑抽离手段,在Vue3.x中也同样可以使用。
虽然好用,但其仍有一些比较显著的缺点,而Vue3.x引入的Composition API中的自定义hook。
很好的解决了mixins带来的一些问题,本文将简单的对比一下这两种实现手段。

二、mixins:
【1】mixins是什么?

image.png

【2】mixins如何使用?

image.png

【3】mixins的一些特性:

1.mixins中的生命周期会与引入mixins的组件的生命周期整合在一起调用。
image.png
2.组件的data、methods、filters会覆盖mixins里的同名data、methods、filters。

(1)组件的同名data 会覆盖 mixins的同名data;组件的同名methods 会覆盖 mixins的同名methods;组件的同名filters 会覆盖 mixins的同名filters
(2)虽然是具有相同逻辑的组件,但是每个组件肯定不可能完全100%相同,会有不同的属性或者不同的methods或者filters等。
(3)如果组件里没有写data/methods/filters……等的话,会自动继承mixins里的data/methods/filters…;如果写了就会以组件里定义的data/methods/filters……为准。

3.不同mixin里的同名方法,按照引进的顺序,最后的覆盖前面的同名方法。

比如两个文件mixin1.js、mixin2.js,都有同名方法: test(),且我们的引入顺序是:[mixin1,mixin2],那么最终执行的方法就是mixin2里的 test()

【4】mixins的缺点:

1.变量来源不明确(隐式传入),不利于阅读,使代码变得难以维护。

组件里可以引入多个mixin,并直接隐式调用mixin里的变量/方法,这会让我们有时候混乱 这些变量/方法 分别是哪个mixin里的?

2.多个mixins的生命周期会融合到一起运行,但是同名属性、同名方法无法融合,可能会导致冲突。

比如组件1中的方法要输出属性info,但是组件2中也有同名属性info,且覆盖了组件1中的属性info,那么当执行组件1中的方法时,输出的确实组件2中的属性,这个我们可以避免,但是一不小心就会导致冲突,很容易制造混乱。

3.mixins和组件可能出现多对多的关系,复杂度较高(即一个组件可以引用多个mixins,一个mixins也可以被多个组件引用)。

注:VUE3提出的Composition API旨在解决这些问题。mixins 的缺点是 Composition API 背后的主要动因之一,Composition API 受到 React Hook 的启发。

三、hook:
【1】Vue3.x中的自定义hook函数是什么?

使用Vue3的组合API封装的可复用的功能函数;自定义hook的作用类似于vue2中的mixin技术;自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂

【2】mixins和Composition API hook解决的区别:

image.png

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

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

相关文章

4.【SpringBoot3】文章管理接口开发

序言 在文章管理模块,有以下接口需要开发: 新增文章文章列表(条件分页)获取文章详情更新文章删除文章 数据库表字段和实体类属性: 1. 新增文章 需求分析 当用户点击左侧菜单中的“文章管理”后,页面主…

[EFI]HP EliteDesk 800 G6 Mini PC电脑 Hackintosh 黑苹果efi引导文件

硬件型号驱动情况主板 HP EliteDesk 800 G6 Mini PC 处理器 Intel Core i5 10500 已驱动内存16GB 2667MHz DDR4已驱动硬盘SSD NVMe KINGSTON SNVS500G 500GB已驱动显卡Intel UHD Graphics 630已驱动声卡Realtek ALC222已驱动网卡Intel(R) Ethernet Connection (10) I219-LM已驱…

vue 点击按钮跳转另一个项目的链接地址,从另一个项目返回回来页面怎么让他刷新

如果你在 Vue 3 中点击按钮跳转到另一个项目的链接地址,然后从另一个项目返回时想要刷新页面,这就涉及到不同域的页面之间的通信问题。因为跨域的限制,返回的页面无法直接刷新原始页面。 一种解决方法是在跳转到另一个项目的链接地址时&…

腾讯云短信服务密钥信息

public IActionResult TestMessage() { // 腾讯云短信服务密钥信息 string secretId "-------------------------- "; string secretKey “---------------------------”; /* 必要步骤:* 实例化一个认证对象,入参需要传入腾讯云账户密钥对s…

SpringBoot_基础

学习目标 基于SpringBoot框架的程序开发步骤 熟练使用SpringBoot配置信息修改服务器配置 基于SpringBoot的完成SSM整合项目开发 一、SpringBoot简介 1. 入门案例 问题导入 SpringMVC的HelloWord程序大家还记得吗? SpringBoot是由Pivotal团队提供的全新框架&…

java数据结构与算法刷题-----LeetCode697. 数组的度

java数据结构与算法刷题目录(剑指Offer、LeetCode、ACM)-----主目录-----持续更新(进不去说明我没写完):https://blog.csdn.net/grd_java/article/details/123063846 方法一:hash表 此方法是工作中时间可以使用的,因为…

2024-01-25 力扣高频SQL50题目1174. 即时食物配送

题目如下: 配送表: Delivery -------------------------------------- | Column Name | Type | -------------------------------------- | delivery_id | int | | customer_id | int | | order_date…

阅读go语言工具源码系列之gopacket(谷歌出品)----第一集 DLL的go封装

gopacket项目是google出品的golang第三方库,项目源码地址google/gopacket: Provides packet processing capabilities for Go (github.com) gopacket核心是对经典的抓包工具libpcap(linux平台)和npcap(windows平台)的go封装,提供了更方便的go语言操作接…

嵌入式linux学习之系统烧录

1.所需文件 1. 开发板为正点原子stm32mp157,文件可按照linux驱动教程编译,也可在正点原子文档->08、系统镜像\02、出厂系统镜像中找到: 2.烧录 1.拨码开关为000(usb启动),otg接口接入虚拟机,打开stm32cubeProgrammer: 2.页面…

AP5101C 高压线性 LED恒流驱动器 DFN2*2 LED灯汽车雾灯转向灯

产品描述 AP5101C 是一款高压线性 LED 恒流芯片 , 简单 、 内置功率管 , 适用于6- 100V 输入的高精度降压 LED 恒流驱动芯片。电流2.0A。AP5101C 可实现内置MOS 做 2.0A,外置 MOS 可做 3.0A 的。AP5101C 内置温度保护功能 ,温度保护点为 130 …

c# 策略模式

在 C# 中,策略模式是一种行为型设计模式,它定义了一系列算法,并将每个算法封装到具有公共接口的独立类中,使得它们可以互相替换。这样可以使得算法的选择独立于算法的使用者,从而提高了灵活性和可维护性。 以下是策略…

【字节二面算法题】84. 柱状图中最大的矩形

84. 柱状图中最大的矩形 解题思路 从左向右依次遍历数组中的元素如果栈为空或者当前考察的新元素值比栈顶元素大,表明以栈顶元素值为高的矩形面积暂时不能确定,将当前考察的元素入栈,在这个条件下,栈中的元素从栈底到栈顶元素依…

门面模式 Facade Pattern

门面模式 门面模式(Facade Pattern),也称之为外观模式,其核心为:外部与一个子系统的通信必须通过一个统一的外观对象进行,使得子系统更易于使用。 在软件开发领域有这样一句话:计算机科学领域…

CQ 社区版 2.8.0 | 支持TiDB、StarRocks,新增列过滤算法、导出模式设置等

Hello,CloudQuery 社区版 2.8.0 已发布,本文将带大家详细解析本次更新的功能~(完整的讲解视频可点击 👉🏻 CloudQuery 社区版2.8.0 功能讲解演示 本期亮点更新 新增支持数据源 TiDB、StarRocks数据保护新增列过滤脱敏…

cmd命令行输出的内容复制粘贴到文本中

cmd程序执行完后按任意键进行结束,无法直接复制命令行里输出的内容,如下图,在Windows系统里按ctrlC,然后该窗口就关闭了,内容也没有复制成功到粘贴板。 解决办法如下: 在上方打开设置 然后在“交互”里打…

JDBC 总结

一、JDBC概述 JDBC(Java DataBase Connectivity)java数据库连接是一种用于执行SQL语句的Java API,可以为多种关系型数据库提供统一访问, 它由一组用Java语言编写的类和接口组成。有了JDBC,java开发人员只需要编写一次程序,就可以…

Linux系统中虚拟文件系统原理与方法

在 Unix 的世界里,有句很经典的话:一切对象皆是文件。这句话的意思是说,可以将 Unix 操作系统中所有的对象都当成文件,然后使用操作文件的接口来操作它们。Linux 作为一个类 Unix 操作系统,也努力实现这个目标。 虚拟文…

Vue2 和Vue3 有什么区别

一. 根节点不同: vue2中必须要有根标签vue3中可以没有根标签,会默认将多个根标签包裹在一个fragement虚拟标签中,有利于减少内存。 二. 组合式API和选项式API: 在vue2中采用选项式API,将数据和函数集中起来处理&…

LeetCode 2859. 计算 K 置位下标对应元素的和【位操作】1000

本文属于「征服LeetCode」系列文章之一,这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁,本系列将至少持续到刷完所有无锁题之日为止;由于LeetCode还在不断地创建新题,本系列的终止日期可能是永远。在这一系列刷题文章…

E4 基于Mysql的游标定义和应用

一、实验目的: 熟练使用MySQL游标的定义和应用。 二、实验要求: 1、基本硬件配置:英特尔Pentium III 以上,大于4G内存; 2、软件要求:Mysql; 3、时间:1小时; 4、撰写实验报告并按时提交。 三、实验内容: 问题1:请写一个存储…