vue 获取数组索引_Vue中数组索引项、对象属性增删无法触发更新检测

对于初级前端程序员来说,原生js基础不扎实,在敏捷开发追求效率的情况下,快速使用框架会极其容易忽视一些小的却非常关键的知识点,比如我们今天要看的《Vue中数组索引项、对象属性增删无法触发更新检测》,再比如这个前端程序员就是我……

当你在用Vue开发的时候,你可能不经常,只是偶尔地遇到,“哎?我明明把异步数据赋值给我定义的数组变量或者对象变量了,为什么页面上数据还是老旧的并没有改变呢?”,这时候你可能各种尝试,比如把生命周期函数mounted()更改为created(),于是数据的重新绑定直接被你提前到new Vue()节点;或者你在你的数据重新赋值之前插入个alert(),直接粗暴触发更新检测,但明显我们不允许在页面中出现这个;又或者机智地使用个setTimeout(function(){},0),但多测试几次,你会发现,我根本控制不了这个定时器是否一定触发,这特么到底是为什么。终于,碰了几次南墙,你想回头,(怎么可能,你必须解决这个问题,项目必须完成的呀!),所以寻求其他种种方法,绕过了这堵高墙,然后心虚地告诉自己终于解决了,但你根本不知道这里面埋了什么隐患,就等着项目交付的时候全部爆发了。好了,吹牛逼到此结束,老套路,先重现错误:

HTML

  • name: {{data.name}},age: {{data.age}}

JavaScript

export default {

name: 'inspection',

data() {

return {

formData: [{

id: 1,

name: 'zhangsan',

age: 20

},{

id: 2,

name: 'lisi',

age: 21

},{

id: 3,

name: 'wangwu',

age: 22

}]

}

},

mounted() {

this.formData[0] = {

id: 4,

name: 'zhaoliu',

age: 23

};

}

}

(style在这里就不做显示了)

呐,下面就是结果啦:

image.png

简直是丝毫不给面子啊!所以这是为什么,你想啊,数据都挂载渲染上去了,写在mounted()里还有啥用,当然凉凉,你完全可以写在created()里,但是如果这是异步数据呢???我们凭什么保证在某个生命周期内就拿到数据,不可能的!5G都不可能的!那么怎么解决?!把目光投向Object.defineProperty(),这可是原生js的方法,牛逼的很呢!Vue的更新检测就靠这玩意操作setter()、getter()了。所以,怎么用才能随时随地触发这类数据的更新检测?官方文档给出了明确的方法,这里直接看成功示例:

HTML

  • name: {{data.name}},age: {{data.age}}

JavaScript

import Vue from 'Vue'

export default {

name: 'inspection',

data() {

return {

formData: [{

id: 1,

name: 'zhangsan',

age: 20

},{

id: 2,

name: 'lisi',

age: 21

},{

id: 3,

name: 'wangwu',

age: 22

}]

}

},

mounted() {

Vue.set(this.formData, 0 , {id: 4, name: 'zhaoliu', age: 23});

// this.formData.splice(0, 1, {id: 4, name: 'zhaoliu', age:23});

}

}

(style我就是不写好看,并且不展示出来,怎样?批评就自闭!)

image.png

好啦,这就成功触发Vue的更新检测啦!当然你完全可以用数组的变异方法来触发:

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

提示(Tips):你无法直接替换数组项,但是你完全可以不像本文这样主动触发而改变数组项里面的属性值。关于对象,你也只是不能直接新增、删除一个键值对,但你完全可以改变其中的属性值。好了,到此就停住吧,希望能给看到这篇文章的你有所帮助,今年应该不会写新的初级知识记录了,明年见!9102新年快乐!

参与评论 您还未登录,请先 登录 后发表或查看评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页

打赏作者

weixin_39963080

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值