vue中let _this=this作用

最新推荐文章于 2023-07-27 14:11:09 发布
最新推荐文章于 2023-07-27 14:11:09 发布
阅读量1.1k 收藏 1
点赞数 3
CC 4.0 BY-SA版权
分类专栏： javascript vue+element 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wjw_de_java/article/details/124892470
本文介绍了在Vue中使用定时器时，this关键字指向改变的问题，导致无法正确修改vue实例的变量。通过保存初始的this为`_this`，可以确保在回调函数中仍能访问到vue实例的属性和方法。这个技巧对于理解和避免在前端开发中常见的Vue绑定错误至关重要。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

//vue 变量 
isclick: true,
//定时器3秒后将isclick改为false
setTimeout(function(){
	this.isclick = false; 
},3000);
//打印this.isclick依然是true;

let _this=this作用：正常我们要获取vue变量或方法的时候，就使用this，但是在一些用到回调函数的时候，this指的就不是vue变量，而是回调函数本身，普通函数的this指向调用它的那个对象，所以在一开始的时候，先定义_this=this，这样在任何位置都可以用_this来获取vue变量或方法。

Vue项目中，在filters中使用this（Vue实例对象）
郭宝的博客
05-06 6008
效果图： 方式一： 在data对象中定义一个 this_ 变量，接收this（Vue实例对象），如下代码： data() { return { this_: this } } 然后声明过滤器时，在形参中加上vue filters: { teacherFiliters(value, vue) { console.log(vue) for (let i = 0; i < vue.teachers.length; i...
vue2.0使用ES6语法的箭头函数对this作用域的理解
若晨工作室
09-19 1万+
在做vue项目时用到了axios，但是发现axios请求之后的回调函数里this并不指向当前vue实例，导致浏览器报错。 部分代码： test:function(){                 let _self = this;//在外层函数内定义变量存储当前vue实例。 this.$axios.post("url",{ }).then(function(res){
TypeScript let{oa,ob}=this;
shenliang34的专栏
02-19 651
TypeScript let{oa,ob}=this; 把this中oa变量赋值给一个临时变量 == let oa = this.oa
let _this = this；作用讲解
有一颗前端心的后端开发小哥
12-08 3802
let _this = this;作用讲解 近日在学习vue方面，发现一个问题回答的挺好，在此记录下。 作用讲解：正常我们要获取vue变量或方法的时候，就使用this，但是在一些用到回调函数的时候，this指的就不是vue变量，而是回调函数本身，所以在一开始的时候，先定义_this=this，这样在任何位置都可以用_this来获取vue变量或方法 ...
this指向之—Vue，let _this = this
MoXinXueWEB的博客
08-21 397
小菜鸟发库存
Vue中 let _this = this的作用
songjuntao8的专栏
04-26 617
作用讲解：正常我们要获取vue变量或方法的时候，就使用this，但是在一些用到回调函数的时候，this指的就不是vue变量，而是回调函数本身，所以在一开始的时候，先定义_this=this，这样在任何位置都可以用_this来获取vue变量或方法。在Vue中this始终指向Vue，但一些其他组件如axios中this为undefined,通过let _this= this将this保存在_this中，再在函数中使用_this均可。近日在学习vue方面，发现一个问题回答的挺好，在此记录下。
Vue源码解析：this.$data、this._data、this.xxx 为什么都能获取数据？data为什么是个函数？
热门推荐
全端菜鸟小姐
12-26 2万+
data中定义了一个数据msg, vue实例上访问这个数据有两种方式，this.$data.msg 和 this.msg，请问，为vue如何实现this.msg能直接访问到data中的msg变量？？？data又为什么是个函数？ 分析： clone 下 vue 的项目源码，然后打开src/core/instance/index.js 调用 init 方法时先进行了检查，确保已经使用 n...
在vue中使用回调函数,this调用无效的解决
11-19
let self = this //使用新变量替换this，以免this无效 //updateStudentInfoToServer是一个将本身部分数据异步上传的接口，接收三个参数，其中第一个是数据，第二、三个是函数，第二、三个函数使用function(){}形式...
vue_t_v14
l1029455098的博客
03-21 2937
vue
对于 let _this = this的理解
weixin_44245853的博客
12-11 946
$("#btn").click(function(){ var _this = this; //这里this和_this都代表了"#btn"这个对象 $(".tr").each(function(){ this;//在这里this代表的是每个遍历到的".tr"对象 _this;//这里仍代表上面的"#btn"对象 }) }) ...
vue2项目中 let _this=this 这么写的好处是什么
m0_57742630的博客
07-27 1180
由于JavaScript中"this"的指向取决于函数的调用方式，而在Vue中，组件中的方法有时可能会导致"this"上下文不正确，尤其是在涉及回调函数或异步操作时。1. 解决回调函数中的"this"问题：在Vue组件中，如果使用箭头函数（ES6的箭头函数具有词法作用域），则可以避免"this"上下文丢失。但是，如果使用普通函数，那么函数内部的"this"将会丢失它原本应该指向的Vue组件实例，此时，将"this"赋值给"_this"可以在回调函数中正确地访问Vue组件实例。
JS中关于 let that = this 的理解
weixin_51795940的博客
07-21 1923
在JavaScript中，这种写法通常用于解决this关键字在不同作用域中指向不同对象的问题。在某些情况下，例如在嵌套函数或回调函数中，this关键字可能不再指向期望的对象。为了在这些情况下仍然能够访问外部作用域中的this，开发人员会创建一个新的变量（通常命名为that或self），并将其赋值为外部作用域中的this。这样，在嵌套函数或回调函数中，就可以通过访问that变量来访问外部作用域中的this。在上面的代码中，由于setTimeout的回调函数是在全局作用域中执行的，所以其中的this。
let 和 var的区别
weixin_30420305的博客
03-04 165
基本用法 ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。 { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果l...
Vue中使用es6语法（=＞和let)（2020-10-19）
Larry的博客
10-19 1108
vue 中 的=>函数 箭头函数一般用于函数嵌套时，防止this指向变化，在箭头函数中this的指向一直是外层对象，即廖雪峰大神说的“箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者obj” function(x){ return x + 6; }; 相当于( x) => x+6 简化了return和function显示声明 当有多个返回值时，或者多个条件则： x => { if (x > 0) { return x
【折腾】非响应式数据为何不能用let而是this
Madman528的博客
03-25 456
非响应式数据定义在return{}外， ，照理data()也是个函数，为何用let定义外面无法访问，要用this.属性=““ 才可以，是因为作用域问题吗 得出结论：在datareturn外定义的用let var name声明的数据不过是普通变量，无法被外界访问，当然不信是个函数可以打印一下 data渲染后再到mounted ...
.then(res => { this.site_list = res.ResData.Items //站点容量 this.SiteName_rl = this.site_list.map(site => site.PhotovoltaicInstalledCapacity) //发电功率 this.SiteName_gl = this.site_list.map(site => site.PhotovoltaicPowerGeneration) //总发电量 this.SiteName_zfdl = this.site_list.map(site => site.PhotovoltaicTotalPowerGeneration) //站定名称 this.SiteName_dy = this.site_list.map(site => site.SiteName); // const days = this.SiteName_dy this.GetCurType_1('日') for (let i = 0; i < this.site_list.length; i++) { this.ZZJRLShuzi += this.SiteName_rl[i] const obj = { ZDMV: this.SiteName_dy[i], FZ: "/", ZT: '正常', RL: this.SiteName_rl[i], SSGL: this.SiteName_gl[i], BRFDL: '0', BYFDL: '0', ZFDL: this.SiteName_zfdl[i] }; //console.log(obj) this.reportMonData.push(obj) } vue 代码如何优化
最新发布
03-15
这段 Vue.js 的代码实现了对 `site_list` 数据的处理，并将结果存储到多个变量以及数组中。虽然功能可以实现，但存在一些冗余操作和不够优雅的地方。以下是优化建议： --- ### **代码优化思路** 1. **减少重复计算** 目前代码中多次调用了 `.map()` 来提取数据字段 (`this.site_list.map(...)`)，这导致了不必要的性能开销。可以通过一次遍历完成所有需要的数据提取。 2. **合并逻辑** 将部分逻辑整合在一起，避免过多嵌套循环或独立的操作步骤。 3. **提升可读性** 使用更具语义化的变量名、函数封装等手段提高代码的可维护性和易理解度。 4. **利用工具库（如果必要）** 如果项目允许，可以引入像 Lodash 这样的工具库简化常见的集合操作。 5. **解构赋值** 利用 JavaScript 的解构语法可以直接获取对象属性，减少繁琐的点式访问。 6. **初始化状态管理** 确保初始状态下相关的数据结构已经准备好，避免频繁地手动清空旧数据。 --- ### **优化后的代码** ```javascript .then(res => { // 解析返回的结果并直接映射生成目标数据 const { Items } = res.ResData || {}; if (!Items || !Array.isArray(Items)) return; this.site_list = Items; this.ZZJRLShuzi = 0; // 初始化累积值 // 清空 reportMonData 避免历史残留 this.reportMonData = []; for (const site of this.site_list) { // 提取关键字段 const { PhotovoltaicInstalledCapacity: rl, PhotovoltaicPowerGeneration: gl, PhotovoltaicTotalPowerGeneration: zfdl, SiteName: dy } = site; // 更新累计值 this.ZZJRLShuzi += Number(rl); // 构造报告项 const item = { ZDMV: dy, // 站点名称 FZ: "/", // 固定分隔符 ZT: "正常", // 默认状态 RL: rl, // 容量 SSGL: gl, // 发电功率 BRFDL: "0", // 前一天发电量 BYFDL: "0", // 昨天发电量 ZFDL: zfdl // 总发电量 }; this.reportMonData.push(item); } // 调整日期类型 this.GetCurType_1("日"); }); ``` --- ### **优化细节说明** 1. **提前解析 `res.ResData.Items` 并校验是否存在** - 如果请求未成功或缺少预期数据，则直接终止后续流程，防止潜在错误。 2. **使用 ES6 解构语法** - 对象解构减少了反复通过 `site.xxx` 访问字段的需求，让代码更简洁清晰。 3. **单次遍历完成多重任务** - 同时提取所需字段、更新累加器、构造最终报表数据。 4. **清理多余内容** - 移除了注释掉的内容（如 `// const days = ...`），只保留核心逻辑。 5. **确保数值运算安全** - 在累积 `PhotovoltaicInstalledCapacity` 时显式转换为数字类型以防字符串拼接问题。 --- ### **进一步改进方向** 如果你希望支持动态化需求或其他复杂场景，还可以考虑以下做法： - 把固定格式的部分抽离成模板配置； - 引入 Redux 或 Vuex 实现集中式的全局状态管理； - 结合 TypeScript 类型检查增强代码健壮性； --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值