vue 数组更新(push【可用】,$set,slice,filter,map【都属于浅拷贝】)问题



this.$axios.post('https://....php',this.$qs.stringify({
                user: 'suess'
            }))
            .then(res => {
                this.dataa = res.data; //这里的dataa视图不会更新,在其他函数里this.dataa没有值
		})

在Vue中中括号记法赋后,不会触发 updated,也就是视图没有更新。
用push, pop 等方法改变数组则可以,或者直接将指针指向一个新的数组,例如通过 slice,filter,map等方法返回的新数组,也会触发视图更新。
也可以通过Vue.$set()的办法来改变数组的值。


$set

ps:现在有两个数组,分别为arr1,arr2,如果arr1以下标赋值改变数组,arr2以$set改变数组,结果是什么样呢?
data:{
arr1 = ['a','b','c'];
arr2 = [‘foo','bar','baz'];
}

vm.arr1[1] = 'alpha';
vm.$set(vm.arr2, 1, 'alpha');
根据开始我们说的根据下标索引改变数组不能触发状态更新,我们会知道:第一个数组的第二项改变不会在页面更新,只有第二个数组的更改会在页面更新。然而结果却是:

arr1 = ['a', 'alpha', 'b', 'c'];
arr2 = [‘foo', 'alpha', 'bar','baz'];
两个数组的值都更新了,也就是说,arr2用$set()方法更新时,页面会全部更新一遍。

转自https://www.jb51.net/article/136049.htm

filter()快速过滤创建一个新数组

var new_array = arr.filter(
callback(element[, index[, array]])[, thisArg]
)

var a = [1,2,3,4].filter(m => true)

a
(4) [1, 2, 3, 4]
var a = [1,2,3,4].filter(m => false)

a
[]
var a = [1,2,3,4].filter(m => m>2)

a
(2) [3, 4]

转自https://blog.csdn.net/weixin_30680385/article/details/98122329

map()

(1) 返回一个经过处理后的新数组,但不改变原数组的值。

var a = [1,2,3,4,5]
var b = a.map((item) => {
return item = item * 2
})
console.log(a) // [1,2,3,4,5]
console.log(b) // [2,4,6,8,10]
转自https://www.jb51.net/article/150865.htm


循环push

方法1:循环push

for(var i in that.xuanzArr_beixuan){
that.xuanzArr.push([]);
}
方法2:解析JSON
JSON.parse(JSON.stringify(this.templateData))
转自https://www.cnblogs.com/shark1100913/p/12143534.html


slice()

slice是指定在一个数组中的元素创建一个新的数组,即原数组不会变

var color = new Array('red','blue','yellow','black');
var color2 = color.slice(1,2);
alert(color);   //输出 red,blue,yellow,black
alert(color2); //输出 blue;注意:这里只有第二项一个值
https://blog.csdn.net/hbwang_716/article/details/118684011


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM