vue修改数组页面不生效_Vue中数组直接修改不是不能响应吗？

最新推荐文章于 2024-05-16 12:57:52 发布
最新推荐文章于 2024-05-16 12:57:52 发布
阅读量1.3k 收藏
点赞数
文章标签： vue修改数组页面不生效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39916549/article/details/111805449
版权

这个问题其实挺有趣的，先抛结论：

数组响应确实是不会响应，但是你可以看到你页面上的数据其实会有变化

这是为什么呢？其实这里和两个概念有关：你在页面上看到的数据：其实是vue通过你的kkk的值更新对应的dom元素内部的值

vue更新dom的操作(也就是1的步骤)是异步执行的

关于1：

你应该听说过虚拟dom这个东西吧，没听说过也不要紧。具体其实就是说我们的数据映射到页面上并不是直接映射的，而是通过数据 =〉虚拟dom =〉更新真实dom这样一个过程。所以其实并不是直接你修改了你变量里的值，对应页面上dom元素的内容就直接改了，这中间有个过程。这点要记住，很重要

通过第一点的解答你知道了vue更新dom这个是有个过程的，并且这个过程他是异步的摘自vue官方文档：深入响应式原理章节

接下来我们详细介绍2: vue更新dom的操作是异步执行的

知道了vue更新dom的操作是异步的了，异步的方式具体是什么呢？根据场景支持程度分别分为setTimeout和Promise两类，分别对应创建的是JS运行时里的宏服务与微服务。宏服务与微服务的关系：一个宏服务下面可以有很多微服务，执行完一个宏服务再执行下一个宏服务。

这里的概念你可以之后在查，主要是要突出一个执行关系，就是在JavaScript运行时：第一个宏服务开始同步 => 第一个宏服务同步代码执行完成 => 第一个宏服务中微服务(Promise)代码执行完成 => 第二个宏服务(setTimeout)开始执行这样运行的，所以你可以看到无论是Promise的微

最低0.47元/天 解锁文章
weixin_39916549
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中更改数组中属性,在页面中不生效的解决方法
12-13
问题描述： 使用vue的方法获取了数组数据，获取数据后为每个数据增加edit属性，初始值均为false，其目的是为了当点击列表中的编辑按钮时，控制保存与不保存的按钮的出现与消失，结果当更改数组中的edit属性后，页面并没有如预期的那样当edit为true时页面显示更改状态，当edit为false时为不更改状态 解决方案： edit是在通过post方法获取数据后增加到vue的data数据中的属性，一开始我的做法先将接收到的数据赋值到vue的data中，再对vue的data中的数据增加edit属性，这样在改变edit的之后，虽然在js中使用console.log可以看到该值已经发生变化，但页面中的
Vue不能检测到Object/Array更新的情况的解决
12-10
需要注意的是，对于数组，`filter()`、`concat()`和`slice()`方法会返回新的数组，而不是直接在原数组上进行修改，所以它们不会触发Vue的响应式更新。如果需要保持响应性，可以使用这些方法后将结果赋值回原始数组。...
VUE2中数组修改无效问题
dnvtkhbn的博客
05-07 3382
vue数组双向绑定问题
Vue修改数据页面不更新的问题解决_vue数据改变了,但页面数据没有更新
最新发布
2401_84446787的博客
05-16 1123
前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？
Vue.set()例 -->直接对数组中的元素赋值不会触发Vue的响应式更新
ishell1021的博客
01-04 5117
Vue.set()例  -->直接对数组中的元素赋值不会触发Vue的响应式更新  data () {      return {          dataSource: [{              id: 1, name: Bill, age: 21          },{              id: 2, name: stive, age: 23          }
[Vue]不能使用索引直接修改数组，但可以使用索引更新对象数组内的属性
Alcantara的博客
12-02 7437
由于 JavaScript 的限制，Vue 不能检测以下变动的数组 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue当你修改数组的长度时，例如：vm.items.length = newLength 可以使用Vue.set和javascript方法splice(Array.prototype.splice)实现，触发状态更新。
2. Vue 修改数组内容不响应问题
白怀宇的博客
06-21 940
Vue 修改数组内容不响应问题 问题现象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue 修改数组内容不响应问题</title> </head> <body> <div id="app"> <ul> <li v-for="item in list">{{ item
VUE中数组无法更改或者新增
bluelimon的博客
07-26 707
data:{ persons:[ {id:'001',name:'1',age:30,sex:'女'}, {id:'002',name:'2',age:31,sex:'女'}, {id:'003',name:'3',age:18,sex:'男'}, {id:'004',name:'4',age:19,sex:'男'} ] }, methods: { update5(){ // this.persons[0] = {i
详解Vue改变数组中对象的属性不重新渲染View的解决方案
01-19
在解决问题之前，我们先来了解下 vue响应性原理： Vue最显著的一个功能是响应系统– 模型只是一个普通对象，修改对象则会更新视图。 受到javascript的限制，Vue不能检测到对象属性的添加或删除，因为vue在初始化...
vue data对象重新赋值无效(未更改)的解决方式
10-15
它不能检测到通过索引直接设置数组元素或修改数组长度的情况。为确保数组的响应性，可以使用Vue提供的数组变异方法，如`push`、`pop`、`shift`、`unshift`、`splice`、`sort`和`reverse`。 除此之外，当需要复制或...
vue 数组和对象不能直接赋值情况和解决方法(推荐)
01-19
Vue 不能检测以下变动的数组： 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength 当第一种情况需求时，可以使用this.$set(this.arr,index,newVal) Vue 不能检测对象属性的添加或删除： 　　可以使用this.$set(this.person,'age',12)      当需要添加多个对象时，Object.assign({},this.person,{age:12,name:'wee'}) PS：Vue实现对数组、对象的深拷贝、
Vue中的v-for指令不起效果的解决方法
10-17
在Vue.js中，`v-for`指令是一种非常重要的特性，用于循环遍历数组或对象，渲染列表、表格等数据集合。然而，在实际开发过程中，有时可能会遇到`v-for`指令不起作用的问题。以下将详细解释这个问题的原因以及解决方法...
vue项目如何刷新当前页面的方法
08-27
1. 使用 Vue-Router 重新路由到当前页面，页面是不进行刷新的。 2. 采用 `window.reload()` 或者 `router.go(0)` 刷新时，整个浏览器进行了重新加载，闪烁，体验不好。 解决方法 使用 provide 和 inject 组件合作，...
【bug】vue内对象数组无法修改值并且直接复制也无法读取和修改值
lorogy的博客
02-20 1331
直接修改 由于vue机制的原因，this.arr[0]=5这样的单个修改是无效的，应该用以下方法修改 this.$set(this.arr,[index],[value]) 如果是对象数组等比较复杂的，可以复制一个新数组再处理 复制数组 由于vue机制的原因，直接let arr1=this.arr，数组内的对象没有getter和setter。 正确方法： 用es6let arr1=[...th...
Vue项目，通过数组下标更改数组的值不生效，页面没有重新渲染
weixin_44370837的博客
03-29 7004
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 问题背景：今天在开发中遇到了一个需要，在列表里要通过按钮的点击控制手机号码列是显示正常的号码还是显示星号******。 页面大致原型： id 手机号码 操作 1 13400003333 显示手机号（按钮） 2 *********** 显示手机号（按钮） 首先想到的实现方式就是给表格的每条数据增
Vue数组更新检测无效
m0_37728716的博客
07-30 1878
        Object.observe()，它可以异步观察Javascript中对象变化的方法，而无需你去使用一个其他的JS库。它允许一个观察者接收一个按照时间排序的变化记录序列，这个序列描述的是一列被观察的对象所发生的变化。      vue中Observer的构造函数 constructor (value: any) { this.value = value thi...
关于在vue中，修改数组的方法
学术不太好的一个硕士研究生
02-08 1408
关于在vue中，修改数组的方法
vue $set不生效
04-12
在Vue中，$set方法用于向响应式对象添加新的属性，以确保这个新属性也是响应式的。但是有时候可能会遇到$set方法不生效的情况，可能是以下几个原因导致的： 1. 对象不是响应式的：Vue只能检测已经创建时就存在的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值