vue对象数组数据变化,页面不渲染
Posted monkeysoft
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 不能检测以上数组的变动,以及对象的添加/删除,很多人会因为像上面这样操作,出现视图没有更新的问题。
解决方式:
- this.$set(你要改变的数组/对象,你要改变的位置/key,你要改成什么value)
this.$set(this.arr, 0, "OBKoro1"); // 改变数组 this.$set(this.obj, "c", "OBKoro1"); // 改变对象
vue可以监听到数组原生方法导致的数据数据变化
splice()、 push()、pop()、shift()、unshift()、sort()、reverse()
意思是使用这些方法不用我们再进行额外的操作,视图自动进行更新。
推荐使用splice方法会比较好自定义,因为slice可以在数组的任何位置进行删除/添加操作
3.替换数组/对象
比方说:你想遍历这个数组/对象,对每个元素进行处理,然后触发视图更新。
以上是关于vue对象数组数据变化,页面不渲染的主要内容,如果未能解决你的问题,请参考以下文章