vue中修改了数据但视图无法更新的情况

秒速五厘米 2021-09-15 03:48 413阅读 0赞

转自：https://blog.csdn.net/github\_38771368/article/details/77155939

仅用于学习，违者必究！

我们有时候常碰到vue中明明修改了数据，但是视图无法更新，因此我总结了一点点碰到此类的情况：

### 1、v-for遍历的数组，当数组内容使用的是arr\[0\].xx =xx更改数据，vue无法监测到 ###

> 数组数据变动：我们使用某些方法操作数组，变动数据时，有些方法无法被vue监测，有些可以

*  Vue包装了数个数组操作函数，使用这些方法操作的数组去，其数据变动时会被vue监测： 
    
     *  push()
     *  pop()
     *  shift()
     *  unshift()
     *  splice()
     *  sort()
     *  reverse()
     *  vue2.0还增加个方法可以观测Vue.set(items, indexOfItem, newValue)
     *  filter(), concat(), slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组
 *  Vue 不能检测以下变动的数组： 
    
     *  ① 当你利用索引直接设置一个项时，vm.items\[indexOfItem\] = newValue
     *  ② 当你修改数组的长度时，例如： vm.items.length = newLength

话不多说，上代码,并且附上效果图：

<body>
         <div id="app">
               <ul>
                   <li v-for="(item,index) in gc">
                       <span>{
       {item.name}}-{
       {index}}</span>
                       <span>{
       {item.age}}-{
       {index}}</span>
                   </li>
               </ul>
               <button @click="add">click</button>
         </div>
         <script>
           new Vue({
               el:'#app',
               data:{
                   gc:[
                       {name:'zhangsan',age:10},
                       {name:'lisi',age:21},
                       {name:'wangwu',age:22},
                       {name:'wangwu',age:22}
                   ]
               },methods:{
                   // 当点击事件触发时候会修改掉gc[0]的值为lisi,但是视图不会发生变化
                   add(){
                       this.gc[0] ={name:'lisi',age:22} 
                   }
               }
           })
          </script> 
    </body>

![这里写图片描述][SouthEast]

> 以上Vue 不能检测数据变动的数组的2种方式解决办法   
> 将代码中的add()方法改为:

add(){
          // this.gc[0] ={name:'lisi',age:22} //这样直接修改不能被vue监听到
           Vue.set(this.gc,0,{name:'lisi',age:22}) //这样就能被vue监控到，更新视图              
     }

*  1
 *  2
 *  3
 *  4

![这里写图片描述][SouthEast 1]

vue官网给的官方解释

![70][]

本人代码，给Obj添加属性，并进行双向绑定

![70 1][]

本人代码，给数组动态添加字段，并进行双向绑定

![70 2][]

[SouthEast]: /images/20210813/f954895ec00d4877b6543c42d2441218.png
[SouthEast 1]: /images/20210813/4940791ee0504fb08cba18985248677d.png
[70]: /images/20210813/56743c8fe55744c6a0e8c8fa7f38b1fc.png
[70 1]: /images/20210813/f37ed2c9b9ca47e4b2699cb4172838e7.png
[70 2]: /images/20210813/8400dc8645254389a888c5d24279fc70.png