Vue3 - this 概念及使用方法(详细教程)

news2025/7/9 8:49:16

前言

对比 Vue2 ,引出并展开 Vue3 。

本文讲述了 this 概念及应用场景,以及使用方法和代码示例详细讲解。

回忆 Vue2

我们在 Vue2 项目中,可能写得最多的单词就是 this 了,咱们无论是拿数据还是调方法,一律 this。

先来看个 Vue2 小示例:

export default {
  data() {
	return {
    	name: '月薪过万',
    }
  },
  
  mounted() {
	console.log(this.fun(), this.name)//我要 月薪过万
  },
  
  methods: {
	fun() {
		return '我要'
	}
  }
}

大家注意,Vue2 中这个 this,它的优点显而易见的同时,它的缺陷也非常明显,功能之间互相 this,变量和方法在各个方法混杂,无处不在的 this 耦合的非常强,遍布的 this 与互相耦合的 this 让人看着都头疼。

搞过 Vue2 稍微大点项目的同学,肯定深有体会。

切入 Vue3

注意:在 Vue3 开发中,非常不提倡咱们使用 this。

我们来看一下在 Vue3 中,this 到底指向的是什么,Vue 实例?no no no!

export default {
  setup() {
    console.log(this)
  }
}

很遗憾,是 undefined

官方是这样说的:在 setup() 内部,this 不会是该活跃实例的引用,因为 setup() 是在解析其它组件选项之前被调用的,所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。这在和其它选项式 API 一起使用 setup() 时可能会导致混淆。

啥意思呢,就是 this 未指向当前的组件实例,在 setup 被调用之前,data,methods,computed 等都没有被解析,但事实是组件实例确实在执行 setup 函数之前就已经被创建好了,所以会与 Vue2 this 导致混淆。


但是呢,在 Vue3 中,我们还是有办法使用 this 的,一起来看下如何实现。

<template>
  <button @click="getData()">获取data上的变量</button>
</template>

<script>
import { getCurrentInstance } from 'vue'
export default {
  setup() {
    // 获取this
    const { ctx } = getCurrentInstance()
    const _this = ctx

    // 获取data上的变量
    const getData = () => {
      console.log(_this.d)
    }
    
    // return
    return { getData }
  },
  
  data() {
    return { d: '拿到了!' }
  },
}
</script>

可以看到,成功拿到了 data 上的数据。

在这里插入图片描述

另外,大家不用纠结代码,稍微看一下就行了,不太提倡使用。

写在后面

既然出了这个,必然有它的意义。

正常什么情况下用呢,比如 ElementUI 框架,有一个消息提示组件。

在这里插入图片描述

它允许开发者使用 this.$message 进行调用并显示消息提示,此时呢 Vue3 很少一部分人就会通过咱们刚才说的方法,获取到 this,然后调用该方法。

咱们使用 Vue3 写代码,要远离无脑 this 行为。

SEO

vue3.js官方文档,vue3.js this 官方文档教程,vue3如何使用this,vue3项目中如何引用this?Vue3.0中this的替代方法,如何在Vue 3中使用“this”,Vue3中如何使用this-,Vue 3- 'this‘引用的是方法而不是app,vue3 this问题,vue3 中的methods 不支持this函数,为什么在 Vue 3 函数中未定义“this”,Vue3 - this 概念及使用方法(详细教程)。

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

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

相关文章

前端学习路线(一)

很多人问我前端学习的路线是怎么样的&#xff0c;css要学多久&#xff0c;js高级要不要学&#xff0c;先学node.js还是先学vue&#xff0c;所以想通过一篇博文来讲一下这个事情 要不要学前端三剑客 这个问题是很多想快速上手前端的同学问的最多的一个问题&#xff0c;因为有很…

同样做软件测试,为什么有人月入3k-5k,有人能拿到17-20k?

同样做软件测试&#xff0c;为什么有人月入3k-5k&#xff0c;有人能拿到17-20k&#xff1f; 虽然各大培训机构一直鼓吹软件测试行业薪资高&#xff0c;但是依旧有一些拿着3-5k薪资&#xff0c;甚至找不到软件测试工作的人。 先来看一些例子&#xff1a; 1、小A在一家培训机构…

微信小程序开发教程一--注册小程序、下载开发工具及新建工程

从本章开始,我们将讲解微信小程序的简单开发流程,我将尽量使用简洁的语言,逐个步骤详细讲解,让大家都能跟得上,也希望和大家交流学习。 注册 首先,开发小程序需要先在微信注册。 打开网页:https://mp.weixin.qq.com/ 在下面找到小程序: 将鼠标移上去之后,就能看到“…

mysql的监控大屏

前言&#xff1a; 一款方便的mysql的监控大屏&#xff0c;使用开源项目实现MySQL的监控&#xff0c;对于想要进行mysql的时候情况监控来说比较重要&#xff0c;并且这款工具是不需要与代码进行结合的&#xff0c;直接运行打开就行了。 具体方式如下&#xff1a; 第一款&…

MySQL数据库期末考试试题及参考答案(03)

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl 一、填空题 插入数据时&#xff0c;如果不指定____&#xff0c;必须为每个字段添加数据。MySQL中使用____语句来更新表中的记录。MySQL提供____语句用于删除表中的数据。在…

Redis数据结构之——sds

写在前面 以下内容是基于Redis 6.2.6 版本整理总结 Redis数据结构 Redis是以k-v形式存储的内存数据库&#xff0c;其中key和value都是以对象&#xff08;object&#xff09;的形式进行存储。对象分为&#xff1a;string、list、hash、set和zet五种对象&#xff0c;这五种对象…

MySql 执行count(1)、count(*) 与 count(列名) 区别

MySql 执行count(1)、count(*) 与 count(列名) 区别 1. 初识 count COUNT(expr) &#xff0c;返回 SELECT 语句检索的行中 expr 的值不为NULL的数量。结果是一个 BIGINT 值。 如果查询结果没有命中任何记录&#xff0c;则返回 0。 COUNT(*) 的统计结果中&#xff0c;会包含值…

一篇文章,带你了解CodeTour与入门指导

CodeTour&#xff08;代码之旅&#xff09;是微软官方开发的 VS Code 扩展&#xff0c;允许记录和回放代码的演练和思路。 简介 CodeTour 是一个 VS Code 插件&#xff0c;允许记录和回放代码库的演练和思路。我们通常都是通过代码注释或者文档来解释某段代码或方法的功能及逻…

【Linux】权限管理-权限的概念,umask,粘滞位

文章目录shell命令以及运行原理Linux权限的概念用户间的权限切换su和su -的区别仅提升当前指令的权限Linux权限管理文件访问者的分类(人)文件类型和访问权限&#xff08;事物属性&#xff09;文件权限值的表示方法字符表示方法8进制数值表示方法文件访问权限的相关设置方法改变…

前端项目中资源请求顺序和dom结构顺序不一致,资源启动器有(索引)解析器和脚本

红色框资源是在组件1中 绿色框资源是在组件2中 在页面 DOM 结构中组件顺序是&#xff0c;从上到下&#xff1a;组件1->组件2 但是查看 chrome调试工具的网络请求&#xff0c;发现绿色资源先请求&#xff0c;并且像是请求完才会去请求红色资源&#xff0c;它们启动器那一栏…

C++语法——make_heap、push_heap、pop_heap、sort_heap使用介绍

目录 一.make_heap(...) 二.push_heap(...) 三.pop_heap(...) 四.sort_heap(...) 这三个函数位于<algorithm>头文件中。 可以看这篇文章了解堆排序&#xff1a;手把手教你堆排序 一.make_heap(...) 这是该函数的官方定义&#xff1a; 这个函数用于建立堆。 前两个…

Linux日志管理logrotate日志轮转

文章目录 前言 日志轮转简介 工作原理 配置文件种类 观察主文件和子文件 主配置文件介绍 yum日志轮转示例 配置轮转规则 rotate 3演示 总结 前言 上篇文章学习了系统日志管理&#xff0c;对于日志来讲他是占内存的&#xff0c;当有大量的日志产生的时候&#xff0c;会…

一个简单HTML5期末考核大作业,学生个人html静态网页制作代码

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…

m基于PSO粒子群优化的第四方物流的作业整合算法matlab仿真,对比有代理人和无代理人两种模式下最低运输费用、代理人转换费用、运输方式转化费用和时间惩罚费用

目录 1.算法概述 2.仿真效果预览 3.核心MATLAB程序 4.完整MATLAB程序 1.算法概述 粒子群优化 (PSO)算法是通过模拟鸟群觅食过程中的迁徙和群聚行为而提出的一种基于群体智能的全局随机搜索算法。PSO是将群体(swarm)中的个体看作是在D维搜索空间中没有质量和体积的粒子(part…

Paddle入门实战系列(一):基于PaddleOCR的车牌识别

✨写在前面&#xff1a;强烈推荐给大家一个优秀的人工智能学习网站&#xff0c;内容包括人工智能基础、机器学习、深度学习神经网络等&#xff0c;详细介绍各部分概念及实战教程&#xff0c;通俗易懂&#xff0c;非常适合人工智能领域初学者及研究者学习。➡️点击跳转到网站。…

MySQL十秒插入百万条数据

mysql数据库准备 private String Driver "com.mysql.cj.jdbc.Driver";private String url "jdbc:mysql://localhost:3306/mp?serverTimezoneAsia/Shanghai&rewriteBatchedStatementstrue";private String user "root";private String pa…

Pycharm 翻译插件失效(transaction) 问题解决【包括安装视频教程】

嗨害大家好鸭&#xff01;我是小熊猫❤ 最近有很多朋友反应 翻译插件用不了了(不想看文章的朋友 可以直接点击文章最下方QQ群 领取视频版教程) 那么今天&#xff01;&#xff01;&#xff01; 教大家如何快速解决这个问题 点击文件(file) —> 设置(setting) 点击工具(t…

【附源码】计算机毕业设计JAVA家庭园艺服务平台

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; Springboot mybatis Maven Vue 等等组成&#xff0c;B/…

【Node.js】 第四章 模块化

目录 1. 模块化的概念 1.1 模块化的概念 1.2 模块化规范 2. Node.js中的模块化 2.1 模块分类 2.2 模块加载 2.3 模块作用域 2.4 向外共享模块成员 2.5 exports对象 2.6 Node.js中的模块化规范 1. 模块化的概念 1.1 模块化的概念 按照模块指定规则&#xff0c;把一…

什么是智能合约?新手入门指南

智能合约&#xff0c;也称为数字合约&#xff0c;在计算机网络中使用区块链技术来履行预编程的合约当合同的条件得到满足时&#xff0c;智能合同就会执行&#xff0c;例如向合同的一方发送付款。 智能合约之所以具有吸引力有多种原因&#xff1a; 不信任。由于智能合约及其条…