当前位置: 首页 > news >正文

vue3还用this吗?getCurrentInstance获取当前组件实例

在 Vue 2 中,this 关键字代表当前组件实例。在组件的选项对象中,this 可以用于访问组件实例的属性、方法以及 Vue 实例的一些特定方法。

在Vue3中,我们发现this是undefined,那我们真的没法使用this了吗?vu3给我们提供了一个getCurrentInstance函数: 用于获取当前组件实例。身上有个ctx属性有点类似this,通过代码可以看到如何使用。

建议:vue3中已经不想让大家使用this了,直接通过变量名取值也是很方便的,

当然有喜欢用this的也可以使用这种方式,不过目前看来取到的值是只读的。

<template><div style="font-size: 14px"><div>{{myName1}}</div><div>{{myName2}}</div><div>{{myName3}}</div></div>
</template><script lang="ts">
// vue3.0版本语法
import { defineComponent, getCurrentInstance, ref } from "vue";export default defineComponent({name: "组件名",setup() {// console.log(this);// undefined// getCurrentInstance()获取当前组件实例, ctx是 vue3给我们提供的变量名// const { ctx } = getCurrentInstance()console.log('实例getCurrentInstance:',getCurrentInstance());// 我们利用改变对象名字的写法将改成_thisconst { ctx: _this } = getCurrentInstance()// 首先看看_this是什么console.log('ctx: _this:',_this);const myName1 = ref('测试_this1')const myName2 = ref('测试_this2')const myName3 = ref('测试myName3')// 还是要通过xxx.value改变值改变动态数据》才能动态更新const changeFun = () => {// vue3中已经不想让大家使用this了,直接通过变量名取值也是很方便的,// 当然有喜欢用this的也可以使用这种方式,不过目前看来取到的值是只读的。myName3.value = '改变后的myName3:'+ _this.myName1 + _this.myName2};// 3秒后 想通过_this改变组件内的变量值setTimeout(() => {// _this身上的 myName1 和 myName2 并不是一个ref对象 ,直接改变值也不会动态更新_this.myName1 += '+=使用_this'_this.myName2 += '+=使用_this'console.log(_this.myName1, _this.myName2);// 调用函数改变myName3的值changeFun()}, 3000)return {myName1,myName2,myName3,changeFun};},
});
</script>

初始页面:

看下getCurrentInstance身上有哪些属性:

看下ctx (_this)身上有哪些属性:

可以看到setup return 出来的myName1,myName2,myName3,changeFun 都能取到,

但是注意myName1,myName2,myName3并不是ref对象。所以直接写

_this.myName1 += '+=使用_this'

并不能动态改变值。

3秒后的页面及数据更新:

可以看到myName3.value的形式动态改变了值,而

_this.myName1 += '+=使用_this'

_this.myName2 += '+=使用_this'

console.log(_this.myName1, _this.myName2);

的打印结果并没有改变值。

欢迎关注我的原创文章:小伙伴们!我是一名热衷于前端开发的作者,致力于分享我的知识和经验,帮助其他学习前端的小伙伴们。在我的文章中,你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师,还是仅仅对前端开发感兴趣,我的文章将能为你提供宝贵的指导和知识。

在我的文章中,你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识,并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者,我的文章都能够满足你的学习需求。

此外,我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展,新的框架和工具层出不穷。通过我的文章,你将会了解到最新的前端技术趋势,并了解如何应对这些变化。

我深知学习前端不易,因此我将尽力以简洁明了的方式解释复杂的概念,并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发,并提升你的技能。

如果你想了解更多关于前端开发的内容,不妨关注我的原创文章。我会不定期更新,为你带来最新的前端技术和知识。感谢你的关注和支持,我们一起探讨交流技术共同进步,期待与你一同探索前端开发的奇妙世界!

相关文章:

vue3还用this吗?getCurrentInstance获取当前组件实例

在 Vue 2 中&#xff0c;this 关键字代表当前组件实例。在组件的选项对象中&#xff0c;this 可以用于访问组件实例的属性、方法以及 Vue 实例的一些特定方法。 在Vue3中&#xff0c;我们发现this是undefined&#xff0c;那我们真的没法使用this了吗&#xff1f;vu3给我们提供…...

高校学生宿舍公寓报修维修生活管理系统 微信小程序b2529

本课题要求实现一套基于微信小程序宿舍生活管理系统&#xff0c;系统主要包括&#xff08;管理员&#xff0c;学生、维修员和卫检员&#xff09;四个模块等功能。 使用基于微信小程序宿舍生活管理系统相对传统宿舍生活管理系统信息管理方式具备很多优点&#xff1a;首先可以大幅…...

C++类与对象(7)—友元、内部类、匿名对象、拷贝对象时编译器优化

目录 一、友元 1、定义 2、友元函数 3、友元类 二、内部类 1、定义 2、特性&#xff1a; 三、匿名对象 四、拷贝对象时的一些编译器优化 1、传值&传引用返回优化对比 2、匿名对象作为函数返回对象 3、接收返回值方式对比 总结&#xff1a; 一、友元 1、定义…...

Django回顾2

目录 一.HTTP 1.URL介绍 2.格式&#xff1a; 3.补充&#xff1a; 二.web框架 1.什么是框架 2.什么是web框架 3.wsgi协议 基于wsgi协议的web服务器&#xff1a; 4.协议是怎么规定的 三.Django 1.MVC与MTV模型&#xff08;所有框架其实都遵循MVC架构&#xff09; 2.…...

<JavaDS> 二叉树遍历各种遍历方式的代码实现 -- 前序、中序、后序、层序遍历

目录 有以下二叉树&#xff1a; 一、递归 1.1 前序遍历-递归 1.2 中序遍历-递归 1.3 后序遍历-递归 二、递归--使用链表 2.1 前序遍历-递归-返回链表 2.2 中序遍历-递归-返回链表 2.3 后序遍历-递归-返回链表 三、迭代--使用栈 3.1 前序遍历-迭代-使用栈 3.2 中序遍…...

如何控制Spring工厂创建对象的次数?详解Spring对象的声明周期!

&#x1f609;&#x1f609; 学习交流群&#xff1a; ✅✅1&#xff1a;这是孙哥suns给大家的福利&#xff01; ✨✨2&#xff1a;我们免费分享Netty、Dubbo、k8s、Mybatis、Spring...应用和源码级别的视频资料 &#x1f96d;&#x1f96d;3&#xff1a;QQ群&#xff1a;583783…...

计算机杂谈系列精讲100篇-【计算机应用】PyTorch部署及分布式训练

目录 C平台PyTorch模型部署流程 1.模型转换 1. 不支持的操作 2. 指定数据类型 2.保存序列化模型 3.C load训练好的模型 4. 执行Script Module PyTorch分布式训练 分布式并行训练概述 Pytorch分布式数据并行 手把手渐进式实战 A. 单机单卡 B. 单机多卡DP C. 多机多卡DDP D. L…...

Opencv-C++笔记 (19) : 分水岭图像分割

文章目录 一、基于距离变换与分水岭的图像分割1、图像分割2、距离和变换与分水岭距离变换常见算法有两种分水岭变换常见的算法 3、距离变换API函数接口4、watershed 分水岭函数API接口步骤 5、代码 一、基于距离变换与分水岭的图像分割 1、图像分割 图像分割(Image Segmentat…...

Linux以nohup方式运行jar包

1、在需要运行的jar包同级目录下建立启动脚本文件&#xff1a; 文件内容&#xff1a; #! /bin/bash #注意&#xff1a;必须有&让其后台执行&#xff0c;否则没有pid生成 jar包路径为绝对路径 nohup java -jar /usr/local/testDemo/jdkDemo-0.0.1-SNAPSHOT.jar >/us…...

【c++|SDL】开始使用之---demo

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 SDL 记录 1. hello word #include<SDL2/SDL.h>SDL_Window* g_pWindow 0; SDL_Renderer* g_pRenderer 0;int main(int argc, char* args[]) {//…...

leetcode:有效的括号

题目描述 题目链接&#xff1a;20. 有效的括号 - 力扣&#xff08;LeetCode&#xff09; 题目分析 题目给了我们三种括号&#xff1a;&#xff08;&#xff09;、{ }、[ ] 这里的匹配包括&#xff1a;顺序匹配和数量匹配 最优的思路就是用栈来解决&#xff1a; 括号依次入栈…...

使用STM32微控制器实现光电传感器的接口和数据处理

光电传感器在许多领域中被广泛应用&#xff0c;例如工业自动化、智能家居等。本文将介绍如何使用STM32微控制器实现光电传感器的接口和数据处理的方案&#xff0c;包括硬件设计、引脚配置、数据采集、滤波和阈值判断等关键步骤&#xff0c;并给出相应的代码示例。 一、引言 光…...

ELK企业级日志分析平台——kibana数据可视化

部署 新建虚拟机server5&#xff0c;部署kibana [rootelk5 ~]# rpm -ivh kibana-7.6.1-x86_64.rpm [rootelk5 ~]# cd /etc/kibana/[rootelk5 kibana]# vim kibana.ymlserver.host: "0.0.0.0"elasticsearch.hosts: ["http://192.168.56.11:9200"]i18n.local…...

Shell条件变量练习

1.算数运算命令有哪几种&#xff1f; (1) "(( ))"用于整数运算的常用运算符&#xff0c;效率很高 [rootshell scripts]# echo $((24*5**2/8)) #(( ))2452814 14 (2) "$[ ] "用于整数运算 [rootshell scripts]# echo $[24*5**2/8] #[ ]也可以运…...

【PHP】MySQL简介与MySQLi函数(含PHP与MySQL交互)

文章目录 一、MySQL简介二、MySQLi函数1. 开启mysqli扩展&#xff1a;2. PHP MySQLi扩展的常用函数 三、PHP与MySQL交互0. 准备1. 创建连接&#xff08;mysqli_connect() &#xff09;连接mysql语法 2. 选择数据库&#xff08;mysqli_select_db()&#xff09;3. 在php中操作数据…...

vscode在Windows上安装插件提示错误xhr failed

问题描述&#xff1a; 在Windows下&#xff0c;在vscode里搜索扩展时发现无法搜索&#xff0c;报如下错&#xff1a;”Error while fetching extensions. XHR failed“。 问题定位&#xff1a; 在vscode界面下键入ctrlshiftp&#xff0c; 然后输入&#xff1a;Developer: T…...

SHAP(一):具有 Shapley 值的可解释 AI 简介

SHAP&#xff08;一&#xff09;&#xff1a;具有 Shapley 值的可解释 AI 简介 这是用 Shapley 值解释机器学习模型的介绍。 沙普利值是合作博弈论中广泛使用的方法&#xff0c;具有理想的特性。 本教程旨在帮助您深入了解如何计算和解释基于 Shapley 的机器学习模型解释。 我…...

C++数据结构:图

目录 一. 图的基本概念 二. 图的存储结构 2.1 邻接矩阵 2.2 邻接表 三. 图的遍历 3.1 广度优先遍历 3.2 深度优先遍历 四. 最小生成树 4.1 最小生成树获取策略 4.2 Kruskal算法 4.3 Prim算法 五. 最短路径问题 5.1 Dijkstra算法 5.2 Bellman-Ford算法 5.3 Floyd-…...

「C++」红黑树的插入(手撕红黑树系列)

&#x1f4bb;文章目录 &#x1f4c4;前言红黑树概念红黑树的结构红黑树节点的定义红黑树的定义红黑树的调整 红黑树的迭代器迭代器的声明operator( )opeartor--( ) 完整代码 &#x1f4d3;总结 &#x1f4c4;前言 作为一名程序员相信你一定有所听闻红黑树的大名&#xff0c;像…...

2023年生肖在不同时间段的运势预测

随着信息技术的飞速发展&#xff0c;API已经成为了数据获取和交互的重要途径。很多网站和APP都在运用API来获取数据。今天我们来介绍一个十分有趣的API——《十二生肖运势预测API》&#xff0c;通过这个API&#xff0c;我们可以获取到每个生肖在不同时间段的运势预测&#xff0…...

精通Venera漫画源:从零构建个性化漫画生态系统的完整指南

精通Venera漫画源&#xff1a;从零构建个性化漫画生态系统的完整指南 【免费下载链接】venera A comic app 项目地址: https://gitcode.com/gh_mirrors/ve/venera 你是否曾想过将分散在不同平台的漫画资源整合到一个统一的阅读环境中&#xff1f;Venera作为一款开源漫画…...

运动控制系统(五)-闭环的PI控制系统

上一节我们讲到控制系统的三大规律&#xff0c;第一条就是“比例控制系统无法消除“静差”。这一节我们解决这个问题。闭环积分控制在介绍静差的时候我们提到了&#xff1a;静差的存在主要是因为比例控制器仅依赖于当前误差ΔUn来进行调节&#xff0c;而没有考虑过去&#xff0…...

Ozon运营5大核心场景,Captain AI全功能精准赋能

做Ozon运营,不少卖家会遇到这样的场景:选品时纠结不定,不清楚哪类产品适配市场、合规且有盈利空间;新品上架后缺乏有效推广思路,流量难以提升;财税申报流程复杂,担心操作失误引发违规;物流方案选择困难,难以平衡成本与时效;对账时面对俄语账单无从下手,无法清晰掌握…...

深入MiniCPM-o-4.5-nvidia-FlagOS:理解大模型背后的计算机组成原理

深入MiniCPM-o-4.5-nvidia-FlagOS&#xff1a;理解大模型背后的计算机组成原理 你是不是也好奇&#xff0c;像MiniCPM-o-4.5这样的大模型&#xff0c;为什么能在NVIDIA的GPU上跑得飞快&#xff1f;为什么换个显卡&#xff0c;生成速度就能天差地别&#xff1f;这背后&#xff…...

系统高速下载工具

链接&#xff1a;https://pan.quark.cn/s/ae5af7fb722e系统高速下载工具是一款专为 Windows 系统设计的纯净镜像高速下载工具&#xff0c;单文件绿色运行、无冗余写入&#xff0c;可直连微软官方服务器获取 Win10/Win11 全版本原版系统。一款简单、易用的系统映像高速下载工具 …...

还在手动刷新Elsevier审稿页面?这个免费插件让你一目了然!

还在手动刷新Elsevier审稿页面&#xff1f;这个免费插件让你一目了然&#xff01; 【免费下载链接】Elsevier-Tracker 项目地址: https://gitcode.com/gh_mirrors/el/Elsevier-Tracker 每天打开Elsevier审稿页面&#xff0c;看着那个永远不变的"Under Review"…...

为什么AI时代真正稀缺的不是代码, 而是 Idea. 我因此做了一个“发现+判断”的项目

最近做项目的时候, 我越来越强烈地感觉到一件事: 现在真正卡住很多人的, 可能已经不是“怎么做”, 而是“到底做什么”。 以前做一个产品, 最大门槛通常是执行。 不会写前端, 不会搭后端, 不会部署, 不会把整个闭环跑起来。那个时候, 真正稀缺的是开发能力。 但这两年情况已…...

终极指南:如何利用Java热更新技术实现3倍开发效率提升?

终极指南&#xff1a;如何利用Java热更新技术实现3倍开发效率提升&#xff1f; 【免费下载链接】HotswapAgent Java unlimited redefinition of classes at runtime. 项目地址: https://gitcode.com/gh_mirrors/ho/HotswapAgent 在Java开发过程中&#xff0c;频繁的代码…...

深入circe核心组件:Encoder、Decoder与Codec的完整解析

深入circe核心组件&#xff1a;Encoder、Decoder与Codec的完整解析 【免费下载链接】circe Yet another JSON library for Scala 项目地址: https://gitcode.com/gh_mirrors/ci/circe circe 是 Scala 生态中一款强大的 JSON 处理库&#xff0c;它通过类型安全的方式实现…...

写了 42 年的程序,我会被 AI 取代吗?

过去的几个月&#xff0c;我一直在涛思数据内部推动 AI 提效赋能&#xff0c;而且对大家使用Token 数目不做任何限制。自己更是身体力行&#xff0c;用 AI 重写用户手册、构建端到端测试例、拿出 AI-Agent Ready 的架构设计方案&#xff0c;做研发质量以及开发量的评估等等&…...