记一个vue中data定义变量的坑

最新推荐文章于 2024-05-16 19:01:51 发布
最新推荐文章于 2024-05-16 19:01:51 发布
阅读量5k 收藏 2
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iorn_mangg/article/details/106080328
版权

开发项目中无意发现，vue中methods直接写this.a="sss"，没有在data中定义会发现vue不会报错，按道理他会报a is not defined,

然后实际操作这个变量会发现他没有产生vue的响应，就是我修改了这个值，在视图上是不会改变的。

查看文档发现：

iorn_mangg
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 需求 data中的数据之间的调用操作
11-19
我遇到过这种情况 就是在我的data中 会有数据调用data中的其他数据 如图 我的alertInfoType需要拿到screeningCondition中type的值 用过vue的都知道 我是不能写成alertInfoType:this.screeningCondition.type这种的 原理是什么？忘记了 知道了可以评论说下 所以 我们可以这样写 在mounted中直接赋值就可以了！ 不知道你们有么有遇到过这种情况 反正我是遇到了两次了 第一次忘记怎么处理的了 …… over 希望能帮到你~~~ 补充知识：Vue方法之间相互调用作用域问题 查了好几个写的什么玩意，看的我是一阵难受
vue单页面在methods中使用vue对象的data方法分享
我爱美女S的博客
06-25 1454
vue单页面在methods中使用vue对象的data方法分享
Vue进阶（贰零幺）变量动态绑定
最新发布
IT全栈 华强工作室
05-16 487
data是Vue实例中的实例属性，表示Vue实例观察的数据对象。Vue实例的数据对象。Vue 会递归地把 data 的property转换为gettersetter，从而让 data 的property能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的key/value对)：浏览器 API创建的原生对象，原型上的property会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。一旦观察过，你就无法在根数据对象上添加响应式property。
vue 向对象中添加未在data中声明的属性
南北极之间
02-14 1599
使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。 使用 vm.$set 实例方法 this.$set(this.someObject,'b',2)，这也是全局 Vue.set 方法的别名。
【vue2】data中数据赋值失败找不到、data数据不声明的影响
嗨，朋友你好！我是前端领域的工作者
09-12 1715
vue2data赋值失败、data响应式原理
vue data不可以使用this定义
weixin_43739375的博客
12-31 4906
vue data不可以使用this定义 这种写法是错误的 translate是数组,不是函数,不可以使用this 正确写法:在data外边定义此数组
避免Vue中data数据的响应式
qq_45279180的博客
03-21 3178
对于Vue的响应式大家应该都有所了解，通过getter和setter来实现数据的订阅和分发。我们在实际使用中可能会遇到这样一个场景，就是Vue组件的data部分的数据会非常多，可能数据来到了数千上万条甚至是十来万，这时页面会变得非常卡顿。关于Vue的性能优化中有这样一条：复杂(数据庞大或结构复杂)的对象数据不要放在Data中，这是因为Vue对深度遍历data独享的属性并依次添加getter和setter，以此达到响应式的目的。既然知道原因就好做了，我们可以根据这个问题给出三种解决方案： 将数据不在dat
在Vue mounted方法中使用data变量详解
01-21
如下所示： data: { certificates: null }, mounted: function () { var __this = this; __this.certificates = ...以上这篇在Vue mounted方法中使用data变量详解就是小编分享给大家的全部内容了，希望能给大
在VUE style中使用data中的变量的方法
10-15
在Vue Style中，我们可以直接在组件的样式中使用data中的变量，这为动态改变组件样式提供了极大的灵活性。本文将详细讲解如何在Vue中实现这一功能，并回顾其他两种常见的动态修改样式的方法。 首先，我们要解决的...
vue中如何实现变量和字符串拼接
01-19
整理文档，搜刮出一个vue中如何实现变量和字符串拼接的代码，稍微整理精简一下做下分享。 在data中定义变量： data() { return { a: 'A' } } 如何通过按钮点击实现字符串和变量a的拼接呢？ <button @click='...
vue定义全局变量和全局方法的方法示例
10-18
同样，我们首先定义共用组件，然后在`main.js`中将它赋值给`Vue.prototype`的一个属性，这样所有Vue实例都可以通过`this`访问到这些全局变量和方法： ```javascript // main.js import Vue from 'vue' import App ...
深入了解vue2没有在data中定义的属性非响应式的问题
yjy_191的博客
09-08 844
vue2 响应式数据 是通过 es5 中的 Object.defineProperty 方法来实现，把 data 定义的所有属性，转换为 get/set 方法，使用 Object.defineProperty 方法劫持
vue 001篇 data中是否定义变量问题
qq_42441951的博客
10-28 1179
在工作闲暇期，从Vue基础学起，记录到这里与大家分享学习之路，如果有说的不妥之处，也非常欢迎有缘人来纠正。 vue官网 大家都知道vue是一个具有双向数据绑定功能的框架，这样数据改变时，就可以实时监听到它的变化。但是，只有在创建实例时就存在于实例中的属性才能被监听到变化，也就是在data中已经定义好的变量，才能真正的实现双向数据绑定。那么如果想定义一个对象中的属性，并且想要监听到这个属性的属性值变化，那么就需要在data中给变量附一个初始值，如果不想要初始值，就直接赋值为空就好。这样，才能准确的监听到
为什么vue里面data和methods可以直接通过this访问?
qq_35469342的博客
03-15 641
其实通过this直接访问到methods里面的函数的原因是：因为methods里的方法通过bind指定了this为new Vue的实例(vm)。其实通过this直接访问到datadata里的属性最终会存储到new Vue的实例（vm）上的_data对象中，访问this.xxx，是访问代理后的。
vue 混入 相同的对象，钩子的合并规则
月光恋九霄的博客
02-24 805
当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。 比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。 const myMixin = { data() { return { message: 'hello', foo: 'abc' } } } const app = Vue.createApp({ mixins: [myMixin], data() { return { message:
vue3的知识点
m0_47408822的博客
11-12 477
vue3新增加了一个setup函数，这个函数是在beforeCreate前面执行的，而且setup还能接收2个参数，一个是props一个是 centext,注意setup中this是undefind,再setup中我们不需要使用this， vue3声变量不需要想vue2一样再data里面去声明 ，我们直接再setup这个函数里面去声明就可以，注意再setup里面声明变量有2个方法 一个是通过ref (ref定义的是基本类型的数据) 一个是reactive (reactive 可以定义不同类型的数..
vue 在methods时的this指向问题
sunlando的博客
12-25 1771
vue的methods的this指向问题 使用了element ui 的框架 methods : { checkNum(){ var numb = [1,2,3,4,5,6]; numb.forEach((item) => { this.$message({ message : '$message未定义', type:'error' }) console.log(item)
创建vue组件过程中，无错误提示却显示不出组件data中的数据-template
weixin_44208883的博客
04-15 1621
目前发现有两个原因 实例对象声明要放在组件声明的后面！ <div id="firstVue">//vue对象 <div> <mycom1></mycom1>//使用组件 </div> </div> //组件模板 <template...
vue中向对象中添加未在data中声明到属性
weixin_37722222的博客
07-29 3288
受现代 JavaScript 的限制 (而且Object.observe也已经被废弃)，Vue无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在data对象上存在才能让 Vue 将它转换为响应式的。例如： var vm = new Vue({ data:{ a:1 } }) // `vm.a` ...
vue 的less使用data中定义的变量
05-01
Vue中的less使用data中定义的变量可以...总之，Vue的less使用data定义的变量非常简单，只需要遵循相应的步骤，就可以轻松地实现。这种做法具有灵活性和可重用性，可以方便地对应用进行样式调整，增加了代码的可维护性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值