在js文件中定义普通函数与箭头函数的区别(重点是vue组件中调用这些函数并在其中使用了this)

1. 使用 const 与 function 定义函数的区别 

    使用 export const getSearchKey = () => {} 时,函数不会提升,必须在定义之前调用。
    使用 export function getSearchKey = () => {} 时,函数会提升,但函数的赋值不会提升。可以在定义之前调用,但结果是未定义的。


2. 在js文件中定义普通函数与箭头函数的区别


    export function dbClick(aaa){}   普通函数中无法正确使用 this ,如果使用 this.xxx,那么 this 指向的将会是window窗口,而不是vue组件,因为如果你需要在函数中使用你vue定义的属性等等都是无效的
    
    export const dbClick = (aaa) => { } 箭头函数不会创建自己的 this ,而是使用其作用域中的this值。因此当你在Vue组件中使用箭头函数时, this 将指向Vue实例 该函数的 this 将指向Vue实例,而不是全局对象(在浏览器中通常是window)
    
但是当在vue组件内部定义函数时,即使不是箭头函数也会正常指向Vue组件,而不是window

 3. 除了必须使用箭头函数定义js文件中的函数的情况,还有一种情况 this 即使在普通函数中也能正确指向vue组件,
  

   例如:    
        export function handlerExpand(m) {
          this.$emit("handlerExpand", m);            
        }
        除了上面的this.$emit方法即使不定义箭头函数,this作用域也只指向vue之外,以下三个方法也是能正常指向vue组件,而不是window:
        1.this.$nextTick: 这个方法是Vue实例提供的一个用于异步更新DOM的方法。它允许你在DOM更新后再执行一些操作,并且this会正确地指向Vue实例。
        2.this.$refs: 这个属性是Vue实例提供的一个用于访问子组件的方法。通过使用this.$refs,你可以访问子组件实例并调用其中的方法或访问其属性,而this会正确地指向Vue实例。
        3.this.$store: 这个属性是Vuex实例提供的一个用于访问应用程序状态的方法。通过使用this.$store,你可以访问Vuex存储中的状态并调用其中的getter或commit方法,而this会正确地指向Vue实例。

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

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

相关文章

stm32 TIM

一、TIM简介 TIM(Timer)定时器定时器可以对输入的时钟进行计数,并在计数值达到设定值时触发中断。16位计数器、预分频器、自动重装寄存器的时基单元,在72MHz计数时钟下可以实现最大59.65s的定时定时器不仅具备基本的定时中断功能&…

扩展ACL命令

扩展ACL 语法:access-list access-list-number { permit | deny } protocol { source source-wildcard destination destination-wildcard } [ operator operan ] ------------------------------------------------------------------------------------------…

gitee代码路径大纲//test ok

tcp udp rtsp rtp tcp/ip zmq communication: 各种通信demo (gitee.com)

FFmpeg介绍

官方网站:http://www.ffmpeg.org/ 项目组成 libavformat 封装模块,封装了Protocol层和Demuxer、Muxer层,使得协议和格式对于开发者来说是透明的。FFmpeg能否支持一种封装格式的视频的封装与解封装,完全取决于这个库&#xff0c…

第一个php扩展开发的demo

cd /root/soft/php/php-5.2.6/ext ./ext_skel --extnameheiyeluren cd /root/soft/php/php-5.2.6/ext/heiyeluren vi config.m4 打开文件后去掉 dnl ,获得下面的信息: PHP_ARG_ENABLE(rot13, whether to enable heiyeluren support, [ --enable-heiyelu…

动态库与静态库

1. 库 是代码的二进制的封装形式 在其他的源代码或库中,可以直接调用库的,但是又看不到它 没有公开源代码 库的这种实现方法有利于模块化 而且只要接口合理 不影响库的使用的 sum.c sum.h int sum(int a,int b) { return ab; } xxx.c 需要使用…

LuatOS-SOC接口文档(air780E)--rtc - 实时时钟

rtc.set(tab) 设置时钟 参数 传入值类型 解释 table or int 时钟参数,见示例 返回值 返回值类型 解释 bool 成功返回true,否则返回nil或false 例子 rtc.set({year2021,mon8,day31,hour17,min8,sec43}) --目前只有Air101/Air103/Air105/EC618系列支持时间戳方式 rt…

QT中的 容器(container)-大全

一、介绍 Qt库提供了一套通用的基于模板的容器类&#xff0c;可以用这些类存储指定类型的项。比如&#xff0c;你需要一个大小可变的QString的数组&#xff0c;则使用QVector<QString>。 这些容器类比STL&#xff08;C标准模板库&#xff09;容器设计得更轻量、更安全并…

光伏电站开发流程

随着人们对可再生能源的关注度不断提高&#xff0c;光伏电站的开发流程也变得越来越重要。光伏电站是一种利用太阳能发电的设施&#xff0c;它可以有效地减少化石能源的消耗&#xff0c;同时也可以为环保事业做出贡献。 首先&#xff0c;要进行光伏电站的开发&#xff0c;需要选…

PWM 正玄波形 通过C语言生成

#include <stdio.h> #include <math.h> #include <stdint.h>#define SAMPLE_POINT_NUM (200) /* 需要生成的点的个数 */ #define SINE_MAX (255) /* sin 函数幅值 */ #define PI (3.14…

pytorch训练模型内存溢出

1、训练模型命令命令 如下所示是训练命名实体识别的命令&#xff0c;在win10系统下执行 activate pytorch cd F:\Python\github\ultralytics-main\submain\pytorch_bert_bilstm_crf_ner-main f: python main.py --bert_dir"../model_hub/chinese-bert-wwm-ext/" --…

TIME_WAIT状态TCP连接导致套接字无法重用实验

理论相关知识可以看一下《TIME_WAIT相关知识》。 #include<stdio.h> #include<stdlib.h> #include<string.h> #include<unistd.h> #include<arpa/inet.h> #include<sys/socket.h> #include<errno.h> #include<syslog.h> #inc…

Echarts legend图例配置项 设置位置 显示隐藏

Echarts 官网完整配置项 https://echarts.apache.org/zh/option.html#legend 配置项 legend: { }设置图例为圆形 icon: circle,//设置图例为圆形设置图例位置 top: 20%//距离顶部百分之20//y:bottom 在底部显示设置图例 宽度 高度 itemWidth: 10,//设置图例宽度 itemHeight: …

Dubbo相关的问题

Dubbo 失败机制 Dubbo 是一个 RPC 框架&#xff0c;它为我们的应用提供了远程通信能力的封装&#xff0c;同时&#xff0c;Dubbo 在 RPC 通信的基础上&#xff0c;逐步在向一个生态在演进&#xff0c;它涵盖了服务注册、动态路由、容错、服务降级、负载均衡等能力&#xff0c;…

每日一练【移动零】

一、题目描述 283. 移动零 - 力扣&#xff08;LeetCode&#xff09; 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 二、题目解析 可以…

Python中调用VisualStudio创建的DLL库

1、创建DLL 打开VisualStudio2022&#xff0c;创建新项目 动态链接库-下一步 设置项目名称、项目位置、创建 单击头文件、添加、新建项 选择.h、设置名称、添加 同样的在源文件新建项&#xff0c;创建 代码&#xff1a; test.h #pragma once#ifdef BUILD_TEST #define API_S…

unity3d NPC自动寻路不移动

烘焙的路面不能有间隔&#xff0c;调整地面重新烘焙

数据结构(超详细讲解!!)第二十五节 树与森林

1.树的存储结构 和线性表一样&#xff0c;树可以用顺序和链式两种存储结构。 树的顺序存储结构适合树中结点比较“满”的情况。根据树的非线性结构特点&#xff0c;常用链式存储方式来表示树。树常用的存储方法有&#xff1a;双亲表示法、孩子表示法和孩子兄弟表…

【Linux进阶之路】进程间通信

文章目录 一、原理二、方式1.管道1.1匿名管道1.1.1通信原理1.1.2接口使用 1.2命名管道 2.共享内存2.1原理2.2接口使用 3.消息队列原理 4.信号量引入原理 总结 一、原理 进程间的通信是什么&#xff1f;解释&#xff1a; 简单理解就是&#xff0c;不同进程之间进行数据的输入输出…

18、Android 组件化

Android 组件化架构设计从原理到实战-CSDN博客 Android组件化架构解析总结_android 组件化架构_PalmerYang的博客-CSDN博客 Android组件化开发&#xff0c;从未如此简单 - 知乎