【折腾】非响应式数据为何不能用let而是this

最新推荐文章于 2023-09-08 18:15:49 发布
最新推荐文章于 2023-09-08 18:15:49 发布
阅读量416 收藏
点赞数
分类专栏： 编程经验 文章标签： vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Madman528/article/details/123733557
版权

非响应式数据定义在return{}外， ，照理data()也是个函数，为何用let定义外面无法访问，要用this.属性=““ 才可以，是因为作用域问题吗

 

得出结论：在datareturn外定义的用let var name声明的数据不过是普通变量，无法被外界访问，当然不信是个函数可以打印一下

 data渲染后再到mounted

 

高山我梦口香糖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
let 作用域问题， 全局变量不能this引用
会飞的程序猿
01-13 484
用let、const定义全局变量name, 用this.name,获取值为空 let name = 'dasi' console.log('this---', this.name) console.log('this---', name) 打印结果 this--- this--- dasi const name = 'dasi' console.log('this---', this.name) console.log('this---', name) 打印结果 this--- this--- dasi
Vue 2.x折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件
CRPER
04-16 6858
前言 在写这个的时候，还是不信邪的用了vue jsx的风格去写东西， 当组件的东西多了起来之后，各种报错；没错，最终我又回归到传统的写法； 上一篇写了个搜索的封装，到写这个的时候发现有所可以优化的地方。 效果图 实现思路和功能 基础的功能直接配置上来渲染，而上传组件就不大合适了； 所以选择了slot来实现,如何保证传入的form-item的布局一致，则是拿slot-scope 我这边选型用的...
【折腾】非响应式数据也并非一样要定义在data的retuen{}外
Madman528的博客
03-25 342
但是为什么他妈的都是挂在到组件上面而页面不显示 得出结论：在执行mounted（）DOM渲染完成才定义的this.xx=xx就无法渲染，因为不是响应式的 可以在create（）， beforeMount() mounted()不行！！因为渲染完dom才有this.xxx=xxx ...
箭头函数可以替换let _this = this
废大叔的博客
05-17 2261
let _this = this let _this = this; _this.$axios.get("https://jsonplaceholder.typicode.com/posts") .then(response => { // console.log(response); ...
深入了解vue2没有在data中定义的属性非响应式的问题
最新发布
yjy_191的博客
09-08 960
vue2 响应式数据 是通过 es5 中的 Object.defineProperty 方法来实现，把 data 定义的所有属性，转换为 get/set 方法，使用 Object.defineProperty 方法劫持
TypeScript let{oa,ob}=this;
shenliang34的专栏
02-19 604
TypeScript let{oa,ob}=this; 把this中oa变量赋值给一个临时变量 == let oa = this.oa
React 16.x折腾记 - (6) 基于React 16.x+ Antd 3.x封装的一个声明式的查询组件(实用强大)
CRPER
11-13 2231
前言 最近把新的后台系统写好了…用的是上篇文章的技术栈(mobx+react16); 但是感觉mobx没有想象中的好用,看到umi 2.x了.就着手又开始重构了… 仔细梳理了下上个系统,发现可以抽离的东西不少 有兴趣的瞧瞧,没兴趣的止步,节约您的时间… 效果图 响应式传入 折叠展开搜索条件,默认六个隐藏展开按钮,大于则显示(点击直接取数据源的长度) 传递子组件作为搜索按钮区域 ...
Vue 2.x折腾记 - (15) 捣鼓一个中规中矩loading组件
CRPER
04-01 2854
前言 最近有一个新的项目，UI大佬不知道从哪里找来了一张GIF丢到蓝湖， 说作为全局的页面loading ，但是想了想，还是还是自己画一个。 一开始想过用svg,canvas;最终还是选择了css3+js来实现这个效果； gif的缺点挺多,至于为什么又排除了svg和canvas； 是因为css3+js可控性更强，不管是大小还是颜色，还是响应式(我的项目走的vh,vw)那套来适配； 可以借助打包插件...
数据可视化
weixin_48995695的博客
01-09 7114
excel提供了商业标准的可视化内容，但总显笨拙。也不希望excel形成垄断，到时候坐地起价。程序员的求知天性，也要求随心所欲得设计，总希望是设置参数而不是选项，是调用函数而不是下拉列表框。自由是要付出代价的，就像到地摊上淘A货，或者自已起炉灶。 总会用种种问题，不能显示中文，代码页不同，不能调整大小。众多的媒体推送，看着眼花缭乱。一看就会，一做就废。都成股市里的庄家，套路满满。听话就有糖吃的时代一去不复返。 Matplotlib 默认情况不支持中文，我们可以使用以下简单的方法来解决。这里我们使用思源黑体
React 18 中StrictMode多次调用函数式组件体及其hook
老司机的后备箱
06-09 1124
如上文所述，直接脚手架搭建项目，其中场景会用到异步请求一些数据，然后通过函数式组件响应到页面，在试图找到问题所在的前提下，进行简化，先用同步代码测试，已经发现会重复调用函数体。但是在 以及之前的版本就不会出现这种情况，所以我以为是bug，找了好久，因为是两天前才更新的18.1.0，网上也没讲这个的帖子，就去提了issue。地址：https://github.com/facebook/react/issues/24467 （随后被告知是新特性，已被关闭）再现步骤：再现测试代码 Link to code exa
vue中let _this=this作用
wjw_de_java的博客
05-21 1034
//vue 变量 isclick: true, //定时器3秒后将isclick改为false setTimeout(function(){ this.isclick = false; },3000); //打印this.isclick依然是true; let _this=this作用：正常我们要获取vue变量或方法的时候，就使用this，但是在一些用到回调函数的时候，this指的就不是vue变量，而是回调函数本身，普通函数的this指向调用它的那个对象，所以在一开始的时候，先定义_this=thi
JS中关于 let that = this 的理解
weixin_51795940的博客
07-21 1546
在JavaScript中，这种写法通常用于解决this关键字在不同作用域中指向不同对象的问题。在某些情况下，例如在嵌套函数或回调函数中，this关键字可能不再指向期望的对象。为了在这些情况下仍然能够访问外部作用域中的this，开发人员会创建一个新的变量（通常命名为that或self），并将其赋值为外部作用域中的this。这样，在嵌套函数或回调函数中，就可以通过访问that变量来访问外部作用域中的this。在上面的代码中，由于setTimeout的回调函数是在全局作用域中执行的，所以其中的this。
let 和 var的区别
weixin_30420305的博客
03-04 130
基本用法 ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。 { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果l...
vue data中的this指向问题
s4944315的博客
09-15 3290
在data里定义Object类型的变量时，会发现Object中访问不到vue的this属性。 例如： export default { data(){ return { a: "123", b: { c: this.a } }; }, created() { console.log("b: ", this.b.c); // undefined } } 这种情况可以用到Object的get属性进行属性定义。
解决Vue异步请求中this为undefined以及mounted中获取不到data的数据的问题
Ekertree的博客
07-23 5764
获取路由参数的两种方式this.$route.params.id用于获取如下形式的参数路径/idthis.$route.query.xxx用于获取如下形式的参数路径?xxx=…注意在异步请求中的this不是注意data中的值由created中的异步请求获取并赋值的，mounted中要进行引用的话，可能异步请求中还未返回结果就被引用了。......
前端return中使用this无法访问到 data 定义的属性，this的指向问题
gjylalaland的博客
05-16 565
这样定义的变量可以在 return 中使用。另外，如果需要在组件中修改这个值，可以通过 this.typeName 访问到 data 定义的 typeName 属性。在Vue中，data属性在组件生成时就会被初始化为响应式属性对象，而在return中定义的属性并不是响应式的，因此在return中直接使用。关键字是无法访问到 data 定义的属性的。
vue中的data要用return返回
qq_60163657的博客
03-17 3842
1.不使用return包裹的数据会在项目全局可见，会造成变量污染，使用return包裹数据中的变量只在当前组件中生效，不会影响其他组件 2.当一个组件被定义，data必须为其声明返回一个初始数据对象的函数，因为组件可能被用来创建多个实例 //简单vue实例中data属性是如下方式展示 对象式 let app = newVue ({ el:"#app", data:{ name:'' } }) //在组件实例化项目中 函数式 组件必须使用 export d
Vue中 let _this = this的作用
热门推荐
qq_42750329的博客
07-29 2万+
在查看别人所写的代码时，通常都会看到这样的写法：let _this = this，一开始并不明白其用意，经过查阅发现其目的是为了存储this的指向。可以通过观察下面的例子来加深理解。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>组件测试</titl...
原生实现MVVM数据响应：解析Vue的响应式原理
为什么实现数据响应式？ 数据响应式是现代前端框架如Vue和React的基础。它的主要目的是减少开发者对DOM的直接操作，避免手动更新视图带来的复杂性和性能问题。通过数据驱动视图，当数据发生变化时，框架能够自动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值