vue关于数组的双向数据绑定 vue3.0的双向数据绑定

菜是原罪，今天下午写购物车模块的时候，后端心善，没有让我用cookie来保存用户加入购物车的商品，然后调的接口，把用户加入购物车的商品数据保存到数据库里面。然后在购物车页面调获取购物车列表。好吧，这都不是重点，重点是我菜。。。

在用v-for把购物车列表渲染完之后，写点击是否勾选商品的时候，不管我怎么骚操作，数据都是无法更新到视图，在我心里，vue是前端三大至高神之首，它是神圣的，它是无敌的，它是崇高的，它是不可战胜的！！没错。一定是我自己的问题，因为写代码时候一直满脑子骚操作，把购物车页面拆分成5个页面来写的原因，我猜肯定是我某个组件传值有问题。。。一个小时过去了。。。根本找不出来问题！！！

绝望的菜鸡我根本不知道哪个地方有问题。。最后大致猜出可能是数组有问题。然后就找到了以前文档。。啊啊啊，写了半年vue才知道vue的数组不能直接修改的同时视图发生变化，那些可以发生变化的方法是被重写的。。

当然，vue为我们重写了部分数组方法，使用这些方法时，当数据发生改变时，视图也会更新：

push() 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。

pop() 数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。

shift() 删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。

unshift() 将参数添加到原数组开头，并返回数组的长度 。

splice() 很强大的数组方法，它有很多种用法，可以实现删除、插入和替换。

sort() 按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。

reverse() 反转数组项的顺序。

数据发生变化，页面不能随着更新的方法：

filter() “过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。

concat() 将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本。

slice() 返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下， slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。

什么情况下不能更新视图：

我的解决方法：

Vue.set( target, key, value )

target：要更改的数据源(可以是对象或者数组)

key：要更改的具体数据（数组索引）

value ：重新赋的值