vue对象数组数据变化，页面不渲染

长按识别下方二维码，即可"关注"公众号

每天晚上，干货准时奉上！

很多时候，我们习惯于这样操作数组和对象:

data() { // data数据        return {          arr: [1,2,3],          obj:{              a: 1,              b: 2          }        };      },   // 数据更新 数组视图不更新    this.arr[0] = 'OBKoro1';    this.arr.length = 1;    console.log(arr);// ['OBKoro1'];    // 数据更新 对象视图不更新    this.obj.c = 'OBKoro1';    delete this.obj.a;    console.log(obj);  // {b:2,c:'OBKoro1'}

由于js的限制，Vue 不能检测以上数组的变动，以及对象的添加/删除，很多人会因为像上面这样操作，出现视图没有更新的问题。

解决方式:

1. this.$set(你要改变的数组/对象，你要改变的位置/key，你要改成什么value)

   this.$set(this.arr, 0, "OBKoro1"); // 改变数组
   this.$set(this.obj, "c", "OBKoro1"); // 改变对象
   

   2.数组原生方法触发视图更新

　　　　vue可以监听到数组原生方法导致的数据数据变化

　　

splice()、 push()、pop()、shift()、unshift()、sort()、reverse()

 

意思是使用这些方法不用我们再进行额外的操作，视图自动进行更新。

推荐使用splice方法会比较好自定义,因为slice可以在数组的任何位置进行删除/添加操作

3.替换数组/对象

比方说:你想遍历这个数组/对象，对每个元素进行处理，然后触发视图更新。

-  | 想知道更多？-

   
   
 
   
     
 
    
    


  
    

   
   

长按/扫码加我吧↑↑↑
 
              

本文分享自微信公众号 - 小猴子的web成长之路（monkeysoftwafe）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。

来源：oschina

链接：https://my.oschina.net/u/3689901/blog/4426058