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创建精美的网页。我将深入讲解每个语言的基础知识,并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者,我的文章都能够满足你的学习需求。

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

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

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

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

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

相关文章

Vue3框架中让table合计居中对齐

第一步&#xff1a;给它加一个类名 center-table 如下&#xff1a; <el-table:data"datas.shows"max-height"600px"show-summarystripeborderstyle"width: 100%":header-cell-style"{ textAlign: center }":cell-style"{ text…

this.$refs,salesRankRefjj.searchRankCall is not a function

在vue项目中&#xff0c;在父组件使用$refs获取不到子组件的方法&#xff0c;为什么&#xff1f; 我的报错如下&#xff1a; [Vue wamn]: Error in v-on handler: "TypeError: this.$refs,salesRankRefjj.searchRankCall is not a function found in 代码如下&#xff1a…

【蓝桥杯 LCA 差分】 砍树

题目分析&#xff1a; 这道题还是比较裸的一道书上差分的题目了 对于每一对标记点(x,y) 他们之间的路径就是 x − > L C A ( x , y ) − > y x->LCA(x,y)->y x−>LCA(x,y)−>y 这条路径上的每一条边都要经过。 那么对于一条边&#xff0c;什么时候砍掉这条…

vue3中toRaw 与 markRaw

toRaw 返回由 reactive 或 readonly 方法转换成响应式代理的普通对象。 这是一个还原方法&#xff0c;可用于临时读取&#xff0c;访问不会被代理/跟踪&#xff0c;写入时也不会触发界面更新。 markRaw 标记一个对象&#xff0c;使其永远不会转换为代理。返回对象本身 应…

bash编程 数组和for循环的应用

bash编程 数组和for循环的应用 1、问题背景2、bash 定义数组3、for循环遍历输出数组所有元素4、编写bash脚本输出每个端口是否在监听状态 1、问题背景 linux服务器开机后&#xff0c;需要检查一组端口是否在监听&#xff0c;以便判断这些端口对应的服务是否在运行。可以考虑使…

解释LED显示屏的裸眼3D特效原理

LED电子大屏幕的3D特效技术正在不断发展&#xff0c;而实现这一技术的原理主要包括分光、分色、分时和光栅等四种方法。这些原理都有各自的特点和应用场景&#xff0c;下面将对它们进行详细介绍。 1. 分光方法 分光方法是一种基于偏振光的3D显示技术。通过使用偏振滤镜或偏振片…

leetCode 841. 钥匙和房间 图遍历 深度优先遍历+广度优先遍历 + 图解

841. 钥匙和房间 - 力扣&#xff08;LeetCode&#xff09; 有 n 个房间&#xff0c;房间按从 0 到 n - 1 编号。最初&#xff0c;除 0 号房间外的其余所有房间都被锁住。你的目标是进入所有的房间。然而&#xff0c;你不能在没有获得钥匙的时候进入锁住的房间。当你进入一个房…

0005Java程序设计-ssm基于微信小程序的校园求职系统

文章目录 摘 要目 录系统设计开发环境 编程技术交流、源码分享、模板分享、网课分享 企鹅&#x1f427;裙&#xff1a;776871563 摘 要 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据…

MicroPython STM32F4 RTC功能使用介绍

MicroPython STM32F4 RTC功能使用介绍 &#x1f516;STM32和ESP32 RTC功能差不多&#xff0c;相关篇《MicroPython ESP32 RTC功能使用介绍》&#x1f4cc;固件刷可参考前面一篇《STM32刷Micropython固件参考指南》&#x1f33f; 相关篇《Micropython STM32F4入门点灯》&#x1…

RH2288H V3服务器使用ISO安装系统

1.配置和服务器相同网段地址&#xff0c;RH2288H V3服务器bmc管理网口默认IP是192.168.2.100/24&#xff0c;默认用户root&#xff0c;默认Huawei12#$&#xff0c;网线连接BMC口&#xff0c;登录。默认密码可以在开机时按del键进入配置页面修改 2.配置raid&#xff0c;生产环境…

耗时一个星期整理的APP自动化测试工具大全

在本篇文章中&#xff0c;将给大家推荐14款日常工作中经常用到的测试开发工具神器&#xff0c;涵盖了自动化测试、APP性能测试、稳定性测试、抓包工具等。 一、UI自动化测试工具 1. uiautomator2 openatx开源的ui自动化工具&#xff0c;支持Android和iOS。主要面向的编程语言…

js最新随机字符串,进制数随机字符串,更优秀的随机字符串方式,你绝对没用过的随机字符串方式,可控制位数!

js最新随机字符串&#xff0c;进制数随机字符串&#xff0c;更优秀的随机字符串方式&#xff0c;你绝对没用过的随机字符串方式&#xff0c;可控制位数&#xff01; 函数封装和传参 首先我们&#xff0c;要封装这样一个函数&#xff0c;首先要确定&#xff0c;传入哪些参数。…

java springboot中使用 AOP监听方法执行周期

首先 我们在 pom.xml 中 dependencies标签中加入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactId> </dependency>然后 我们随便创建一个类 编写代码如下 package com.ex…

一个基于.NET Core开源、跨平台的仓储管理系统

前言 今天给大家推荐一个基于.NET Core开源、跨平台的仓储管理系统&#xff0c;数据库支持MSSQL/MySQL&#xff1a;ZEQP.WMS。 仓储管理系统介绍 仓储管理系统&#xff08;Warehouse Management System&#xff0c;WMS&#xff09;是一种用于管理和控制仓库操作的软件系统&…

离散数学-集合论基础

3.1集合的基本概念 1&#xff09;集合及元素 2&#xff09;集合的表示 3&#xff09;集合的关系 4&#xff09;特殊集合 3.2集合的运算 并、交、差、对称差 3.3集合的划分与覆盖 3.4排斥包含管理 3.1集合的基本概念 1&#xff09;集合及元素 将某种具有同种属性的个体…

Appium自动化测试:sdk版本和手机版本不兼容你就这样做,分分钟解决问题

使用pythonappium执行自动化测试脚本提示报错 环境&#xff1a;python3.7以上&#xff0c;appium1.21.0&#xff1b;设备&#xff1a;华为max8真机 报错信息&#xff1a; android.intent.category.LAUNCHER -f 0x10200000 exited with code 4294967295; Stderr: Security ex…

双馈风机频率二次跌落,永磁风机一次调频火电水电光伏储能直流一次调频,虚拟惯性下垂控制,虚拟同步机VSG控制,二次调频也可继续深入研究

双馈风机(永磁同步风机)虚拟惯性控制下垂控制参与系统一次调频的Matlab/Simulink模型&#xff0c;调频结束后转速回复&#xff0c;造成频率二次跌落SFD。 系统为三机九节点模型&#xff08;可更换为四机两区域&#xff0c;十机39节点&#xff0c;IEEE39节点&#xff0c;IEEE11…

Docker | 自定义Docker镜像

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a;Docker系列 ✨特色专栏&#xff1a; My…

微信小程序实现微信登录

文章目录 涉及到的微信官方文档login.wxml效果login.wxml login.js效果login.jsutil.js 后端&#xff08;使用django&#xff09;urls.pyviews.py 流程&#xff1a; 1. wx.getUserProfile() 会调出获取用户微信的页面 2. 当用户点击“允许”后&#xff0c;wx.login() 带着code去…

vue实现海康H5视频插件播放视频的实例,实现取流失败了之后重新获取新的流播放视频

vue实现海康H5视频插件播放视频的实例&#xff0c;实现取流失败了之后重新获取新的流播放视频 h5player是一个基于HTML5的流式网络视频播放器&#xff0c;无需安装浏览器插件即可通过websocket协议向媒体服务取流播放多种格式的音视频流。 首先去海康开发平台&#xff0c;把插…