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

最新推荐文章于 2024-05-08 16:41:41 发布
原创 最新推荐文章于 2024-05-08 16:41:41 发布 · 471 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vscode

本文探讨了在Vue.js中非响应式数据定义于return{}

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

 

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

 data渲染后再到mounted

 

React 16.x折腾记 - (6) 基于React 16.x+ Antd 3.x封装的一个声明式的查询组件(实用强大)
CRPER
11-13 2357
前言 最近把新的后台系统写好了…用的是上篇文章的技术栈(mobx+react16); 但是感觉mobx没有想象中的好用,看到umi 2.x了.就着手又开始重构了… 仔细梳理了下上个系统,发现可以抽离的东西不少 有兴趣的瞧瞧,没兴趣的止步,节约您的时间… 效果图 响应式传入 折叠展开搜索条件,默认六个隐藏展开按钮,大于则显示(点击直接取数据源的长度) 传递子组件作为搜索按钮区域 ...
Vue 2.x折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件
CRPER
04-16 7050
前言 在写这个的时候，还是不信邪的用了vue jsx的风格去写东西， 当组件的东西多了起来之后，各种报错；没错，最终我又回归到传统的写法； 上一篇写了个搜索的封装，到写这个的时候发现有所可以优化的地方。 效果图 实现思路和功能 基础的功能直接配置上来渲染，而上传组件就不大合适了； 所以选择了slot来实现,如何保证传入的form-item的布局一致，则是拿slot-scope 我这边选型用的...
vue data中的this指向问题
s4944315的博客
09-15 3505
在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 6076
获取路由参数的两种方式this.$route.params.id用于获取如下形式的参数路径/idthis.$route.query.xxx用于获取如下形式的参数路径?xxx=…注意在异步请求中的this不是注意data中的值由created中的异步请求获取并赋值的，mounted中要进行引用的话，可能异步请求中还未返回结果就被引用了。......
前端return中使用this无法访问到 data 定义的属性，this的指向问题
gjylalaland的博客
05-16 760
这样定义的变量可以在 return 中使用。另外，如果需要在组件中修改这个值，可以通过 this.typeName 访问到 data 定义的 typeName 属性。在Vue中，data属性在组件生成时就会被初始化为响应式属性对象，而在return中定义的属性并不是响应式的，因此在return中直接使用。关键字是无法访问到 data 定义的属性的。
let 作用域问题， 全局变量不能this引用
会飞的程序猿
01-13 574
用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
【折腾】非响应式数据也并非一样要定义在data的retuen{}外
Madman528的博客
03-25 412
但是为什么他妈的都是挂在到组件上面而页面不显示 得出结论：在执行mounted（）DOM渲染完成才定义的this.xx=xx就无法渲染，因为不是响应式的 可以在create（）， beforeMount() mounted()不行！！因为渲染完dom才有this.xxx=xxx ...
Vue 2.x折腾记 - (15) 捣鼓一个中规中矩loading组件
CRPER
04-01 3039
前言 最近有一个新的项目，UI大佬不知道从哪里找来了一张GIF丢到蓝湖， 说作为全局的页面loading ，但是想了想，还是还是自己画一个。 一开始想过用svg,canvas;最终还是选择了css3+js来实现这个效果； gif的缺点挺多,至于为什么又排除了svg和canvas； 是因为css3+js可控性更强，不管是大小还是颜色，还是响应式(我的项目走的vh,vw)那套来适配； 可以借助打包插件...
vue+element-ui中实现多层级复杂的维度根据数据自动生成的表头
热门推荐
前端技术的学习整理
05-22 3万+
表头主要复杂在：1，有三层，一层是大类，第二层是具体项，第三层是标准值/对比值2，首列和末尾列是一层3，整个表格的维度是根据数据的输入自己生成，也就是动态的下面是在 vue + eleUI 中的解决方案：<el-table :data="tableData" border style="width: 100%" max-height="700" v-loading="areaLoading"...
Vue 2.x脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)
CRPER
11-07 1万+
前言文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue; 给出的是方案,但不是手把手一字一句的给你说十万个为什么!有三类人不适合此篇文章: “喜欢站在道德制高点的圣母婊” – 适合去教堂 “无理取闹的键盘侠” – 国际新闻版块欢迎你去 “有一定基础但又喜欢逼逼的人” 得得得,老子知道你厉害了,你好牛逼,这些问题那么简单,都是小白看的 这种傻瓜文,简直浪费老子的时间! 对于以上三类人,走吧,这里
箭头函数可以替换let _this = this
废大叔的博客
05-17 2329
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 1352
vue2 响应式数据 是通过 es5 中的 Object.defineProperty 方法来实现，把 data 定义的所有属性，转换为 get/set 方法，使用 Object.defineProperty 方法劫持
TypeScript let{oa,ob}=this;
shenliang34的专栏
02-19 664
TypeScript let{oa,ob}=this; 把this中oa变量赋值给一个临时变量 == let oa = this.oa
vue中let _this=this作用
wjw_de_java的博客
05-21 1132
//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 2221
在JavaScript中，这种写法通常用于解决this关键字在不同作用域中指向不同对象的问题。在某些情况下，例如在嵌套函数或回调函数中，this关键字可能不再指向期望的对象。为了在这些情况下仍然能够访问外部作用域中的this，开发人员会创建一个新的变量（通常命名为that或self），并将其赋值为外部作用域中的this。这样，在嵌套函数或回调函数中，就可以通过访问that变量来访问外部作用域中的this。在上面的代码中，由于setTimeout的回调函数是在全局作用域中执行的，所以其中的this。
let 和 var的区别
weixin_30420305的博客
03-04 184
基本用法 ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。 { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果l...
vue中的data要用return返回
qq_60163657的博客
03-17 4021
1.不使用return包裹的数据会在项目全局可见，会造成变量污染，使用return包裹数据中的变量只在当前组件中生效，不会影响其他组件 2.当一个组件被定义，data必须为其声明返回一个初始数据对象的函数，因为组件可能被用来创建多个实例 //简单vue实例中data属性是如下方式展示 对象式 let app = newVue ({ el:"#app", data:{ name:'' } }) //在组件实例化项目中 函数式 组件必须使用 export d
vue let that = this的问题
axinxina的博客
05-08 478
vue 使用let that = this的问题
Vue中 let _this = this的作用
qq_42750329的博客
07-29 2万+
在查看别人所写的代码时，通常都会看到这样的写法：let _this = this，一开始并不明白其用意，经过查阅发现其目的是为了存储this的指向。可以通过观察下面的例子来加深理解。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>组件测试</titl...
computed 能不能监听到非响应式数据变化
最新发布
12-10
4. **为什么 computed 不能监听非响应式数据**：因为 Vue 的依赖收集机制只针对响应式数据。非响应式数据的变化不会触发 computed 的重新计算。 5. **解决方案**：如果需要监听非响应式数据，应该使用 watch 选项或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值