Vue中的Mixins与钩子函数:理解合并与调用

        在Vue的开发过程中,mixins是一个非常有用的特性,它允许我们跨多个组件共享可复用的代码。然而,当我们在组件与mixins之间定义同名的钩子函数或方法时,理解它们之间的相互作用和合并机制就显得尤为重要。

在Vue.js中,对于mixins和组件的选项合并策略:

  1. 生命周期钩子(如mountedcreated等):合并当组件和mixin包含同名的生命周期钩子时,这些钩子函数将都会被添加到该组件的钩子数组中,并按照它们被定义的顺序(首先是mixin中的,然后是组件自身的)依次调用。

  2. 数据对象(data)、计算属性(computed)、方法(methods) 等:覆盖如果这些选项在组件和mixin中同时存在,则组件中的选项会覆盖mixin中的同名选项。这意味着组件将使用它自己的版本,而不是mixin中定义的版本。

  3. 钩子函数以外的选项(如propscomponentsdirectivesfilters等):合并(但遵循特定的合并策略)。对于像props这样的选项,Vue会合并它们,使得组件最终拥有两个选项列表中所有唯一的prop。对于componentsdirectivesfilters等,组件的列表会扩展mixin中的列表,但如果有同名的项,则组件中的项会覆盖mixin中的项。

  4. 特殊选项(如eltemplaterender等):这些选项通常只用于Vue实例或根组件,而不用于通过Vue.component注册的组件。如果mixin试图包含这些选项,Vue可能会发出警告或忽略它们。

什么是Mixins?

        首先,让我们简要回顾一下mixins的概念。在Vue.js的架构中,mixins是一种允许开发者跨多个组件共享代码片段的机制。通过将可复用的功能封装在mixin对象中,我们可以轻松地在多个组件中引入这些功能,而无需重复编写相同的代码。当组件使用mixins时,所有mixins对象的选项将被“混入”该组件本身的选项中。

钩子函数的合并

        对于生命周期钩子(如created、mounted等),Vue.js在组件实例化过程中会按照特定的顺序合并这些钩子函数。并按照特定的顺序(首先是mixins中的钩子,然后是组件本身的钩子)进行调用。但是,这里的“合并”并不意味着将多个钩子函数合并为一个单一的函数。相反,Vue.js会保留这些函数作为独立的实体,并在组件的生命周期事件发生时依次调用它们。这种处理方式确保了每个钩子函数都能在其应有的生命周期阶段被正确执行,同时也避免了函数间的相互干扰。

示例分析

        假设我们有一个mixin和一个组件,它们都定义了mounted钩子,并且在这些钩子中各自定义了一个名为fun的函数(尽管在实际场景中,fun更可能是一个在methods中定义的方法,但这里为了说明问题,我们将其放在mounted钩子中)。

  • Mixins
// myMixin.js  
export const myMixin = {  mounted() {  this.fun(); // 调用 mixin 中的 fun 方法(实际上是组件中的,因为会被覆盖)  console.log('a from mixin mounted'); // 这行代码也会执行  },  methods: {  fun() {  console.log('a'); // mixin 中的 fun 方法,但会被组件中的覆盖  }  }  
};
  • 组件:
// Component.vue  
<script>  
import { myMixin } from './myMixin';  export default {  mixins: [myMixin],  mounted() {  this.fun(); // 调用组件中的 fun 方法  console.log('b from component mounted'); // 这行代码也会执行  },  methods: {  fun() {  console.log('b'); // 组件中的 fun 方法,覆盖了 mixin 中的  }  }  
};  
</script>
  • 输出结果:
b  
a from mixin mounted  
b from component mounted

解释

  1. 当组件被挂载时,首先会调用mixin中的mounted钩子。

  2. 在mixin的mounted钩子中,this.fun()被调用。但是,由于组件中的fun方法覆盖了mixin中的,所以这里实际上调用的是组件中的fun方法,输出'b'。

  3. 接着,mixin的mounted钩子中的console.log('a from mixin mounted');被执行,输出'a from mixin mounted'。

  4. 然后,组件自身的mounted钩子被调用。

  5. 在组件的mounted钩子中,this.fun()再次被调用(但这次是在组件的上下文中,所以它调用的仍然是组件中的fun方法),输出'b'。

  6. 最后,组件的mounted钩子中的console.log('b from component mounted');被执行,输出'b from component mounted'。

        请注意,这里的输出顺序是基于Vue的生命周期钩子调用顺序和JavaScript的执行顺序。在Vue中,mixin的mounted钩子会在组件自身的mounted钩子之前被调用。

关键点

  • 合并而非覆盖

        mixins中的选项和组件本身的选项会被合并,而不是相互覆盖。对于生命周期钩子,Vue.js会保留多个钩子函数为独立的实体,并在生命周期事件发生时依次调用它们。

  • 局部与全局

        直接在mounted或其他钩子中定义的局部变量(如函数)与组件或mixins中的全局方法(如methods中的方法)是分离的,它们之间不会相互影响。

  • 方法覆盖

        如果组件和mixin定义了同名的选项(如方法methods),则组件中的方法会覆盖mixins中的同名选项。

结论

        在Vue.js中,mixins提供了一种强大的方式来复用代码,但理解它们与组件选项之间的合并机制是至关重要的。特别是当处理同名的钩子函数或方法时,需要明确Vue.js的合并和覆盖规则。通过清晰地区分组件和mixins中的代码,我们可以有效地利用mixins来增强我们的Vue.js应用程序。

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

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

相关文章

Reinforement Learning学习记录(五)

前言 最近两周的工作主要是在做方向的探索和相关论文的学习,这次的介绍会分为,项目介绍,论文学习,当前进度,未来计划 项目介绍 最近主要是尝试了两个大类的项目,第一个是视觉追踪,第二个是三维重建 视觉跟踪 视觉追踪的话,参考了这几个开源项目: CoTracker: It i…

手机数据恢复篇:如何从 Android 手机恢复消失的照片

丢失 Android 手机中的照片现在已成为您可能遇到的最糟糕的情况之一。随着手机在相机方面越来越好&#xff0c;即使是那些不热衷于拍照的人也成为了摄影师。 如今&#xff0c;人们可以随时随地拍摄照片&#xff0c;每一张照片都保存着回忆和数据&#xff0c;因此&#xff0c;丢…

变得越来越优秀的方法

反省后看到问题很正常&#xff0c;接纳-行动-改变-能量-帮助-成长变优秀&#xff1b;温和后需要【中庸智慧】灵活处世&#xff0c;不做老好人&#xff0c;须有原则有框架&#xff01; —— 只有深刻地反省&#xff0c;我们才能真正地认识自己&#xff0c;我们反省后会看到自己…

昇思25天学习打卡营第19天|应用实践之基于MobileNetv2的垃圾分类

基本介绍 今天的应用实践是垃圾分类代码开发&#xff0c;整体流程是读取本地图像数据作为输入&#xff0c;对图像中的垃圾物体进行检测&#xff0c;并且将检测结果图片保存到文件中。采用的是MobileNetv2模型&#xff0c;使用官方提供的数据集&#xff0c;数据集分为4大类&…

python如何与前端交互

文章目录 1. 选择一个 Python Web 框架2. 创建 Web 应用程序3. 编写后端逻辑4. 编写前端代码5. 连接前后端6. 部署和测试扩展Jupyter Notebook Python 与前端&#xff08;如 HTML, CSS, JavaScript&#xff09;的关联通常是通过 Web 框架来实现的&#xff0c;这些框架允许 Pyth…

维度的自定义标签:Kylin Cube设计中的元数据支持

维度的自定义标签&#xff1a;Kylin Cube设计中的元数据支持 在数据分析的多维世界中&#xff0c;Apache Kylin的Cube设计提供了强大的灵活性&#xff0c;允许用户根据需求定制化地分析数据。维度的自定义元数据是这一灵活性的体现之一&#xff0c;它允许用户为维度添加额外的…

【MySQL】8.复合查询

复合查询 一.基本查询回顾(新增子查询)二.多表查询三.自连接四.子查询1.单列单行子查询2.单列多行子查询——三个关键字3.多列子查询4.在 from 子句中使用子查询 五.合并查询六.总结 一.基本查询回顾(新增子查询) //1.查询工资高于500或岗位为MANAGER的雇员&#xff0c;同时还…

Python高级(四)_内存管理

Python高级-内存管理 第四章 内存管理 1、对象池 小整数池 系统默认创建好的,等着你使用 概述:整数在程序中的使用非常广泛,Python为了优化速度,使用了小整数对象池,避免为整数频繁申请和销毁内存空间。Python 对小整数的定义是 [-5, 256] ,这些整数对象是提前建立好的…

C语言——循环结构:while、do...while、for

while循环 基本结构 C语言中的while循环是一种基本的循环控制结构&#xff0c;它允许程序重复执行一段代码块&#xff0c;直到指定的条件不再满足为止。while循环的语法结构如下&#xff1a; while (condition) { // 循环体 // 在这里编写要重复执行的代码 } condition …

Avalonia创建导航菜单

1. 简介 已开源&#xff0c;后续还会继续更新学习到的内容&#xff0c;欢迎Star&#xff0c;GitHub地址 开发Avalonia需要的一些资料&#xff0c;我已经分享到另一篇文章 示意图 涉及到内容&#xff1a; MVVM路由模板 开发&#xff1a; 开发工具&#xff1a;Rider&#x…

acnconda虚拟环境管理笔记

虚拟环境 conda create --name photos_com python3.8 conda info --envs activate 环境名 conda install -n 环境名 包名 conda remove --name 环境名 包名 虚拟环境基本操作 下面以例子来说明怎么建立、使用或是删除虚拟环境。比如&#xff1a;想新建一个名为 ‘pytest’ 的虚…

【linux】进程间通信(IPC)——匿名管道,命名管道与System V内核方案的共享内存,以及消息队列和信号量的原理概述

目录 ✈必备知识 进程间通信概述 &#x1f525;概述 &#x1f525;必要性 &#x1f525;原理 管道概述 &#x1f525;管道的本质 &#x1f525;管道的相关特性 &#x1f525;管道的同步与互斥机制 匿名管道 &#x1f525;系统调用接口介绍 &#x1f525;内核原理 …

C++ QT开发 学习笔记(1)

C QT开发 学习笔记(1) 考试系统 创建项目 新建Qt桌面应用程序&#xff0c;项目名&#xff1a;ExamSys。 类信息&#xff1a;类名LoginDialog继承自QDialog &#xff08;1&#xff09; ExamSys.pro 工程文件&#xff0c;包含当前工程的相关信息。 QDialog 是 Qt 框架中用…

二、计划任务

1.什么是计划任务 对于一些特定的任务&#xff0c;可以设定任务&#xff0c;让服务在规定时间去执行 2.windows中的计划任务 打开控制面板》管理工具》任务计划程序》创建基本任务 3.linux中的计划任务 周期性的计划crontab crontab -l :显示当前的计划惹怒我 -e&#…

大健康产业运营模式|大健康行业商业模式|健康管理盈利模式

大家好&#xff01;今天我们来聊聊如何在大健康行业中选择一个适合自己的商业模式&#xff0c;从保健、医疗、健身、美容、养老等方面快速发展并取得成功。 首先&#xff0c;大健康行业涵盖了很多领域&#xff0c;但最核心的是保健和医疗&#xff0c;这两者是保障大家健康的基础…

通过maven基于springboot项目构建脚手架archetype

1、引入脚手架构建的插件依赖 <!--构建脚手架archetype--><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-archetype-plugin</artifactId><version>3.2.1</version></plugin><plugin><…

从零开始学习嵌入式----自定义函数实现strcpy与strcat功能

目录 一、自定义函数实现strcpy功能&#xff1a; 二、自定义函数实现strcat功能 一、自定义函数实现strcpy功能&#xff1a; #include <stdio.h> void fun(char *p,char *q) {while(*q)*p*q;*p\0; } int main() {char str[32]"";fun(str,"hello");…

【Visual Studio】Visual Studio使用技巧及报错解决合集

目录 目录 一.概述 二.Visual Studio报错问题及解决方法 三.Visual Studio操作过程中遇到的问题及解决方法 四.Visual Studio编译优化选项 五.Visual Studio快捷键 一.概述 持续更新Visual Studio报错及解决方法&#xff0c;包括Visual Studio报错问题及解决方法、Visua…

土壤品质检测仪:守护大地之母的科技卫士

土壤&#xff0c;作为地球生命之源&#xff0c;承载着万物的生长与繁衍。然而&#xff0c;随着现代农业的快速发展&#xff0c;土壤品质问题日益凸显&#xff0c;对农作物的生长和人们的健康构成了潜在威胁。 随着环保意识的增强和农业可持续发展的需求&#xff0c;土壤品质检测…

实验8 视图创建与管理实验

一、实验目的 理解视图的概念。掌握创建、更改、删除视图的方法。掌握使用视图来访问数据的方法。 二、实验内容 在job数据库中&#xff0c;有聘任人员信息表&#xff1a;Work_lnfo表&#xff0c;其表结构如下表所示&#xff1a; 其中表中练习数据如下&#xff1a; 1.‘张明…