Vue中的set、delete方法在列表渲染中的使用
不知大家是否有过类似的经历，比如说for循环渲染数组或者对象中的数据，渲染完成后，给数组或者对象添加、修改、删除数据后却没有在页面中渲染出来。
本篇就是来解释说明修改数组和对象数据视图立马更新的问题，要掌握各种情况和set、delete方法的使用
数组中数据渲染后的修改、新增、删除问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>list渲染中的问题
</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<div v-for="(item, index) of list" :key="item.id">
{{item.text}} ---- {{index}}
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
list:[{
id:"001",
text:"hello"
}, {
id:"002",
text:"lll"
}, {
id:"003",
text:"ccc"
}]
},
})
</script>
</body>
</html>运行结果
如果我们想看看添加数据是不是会继续渲染到界面中应该怎么做呢？
控制台输入list的push方法
这样是可以渲染到界面上的
结果我们继续添加list数据的数据，却发现没有渲染在界面上
从结构上看起来添加的不是响应式的数据， Vue 无法探测普通的新增属性
我们不能通过数组下标的形式操作数组，直接修改新增删除都是无法触发视图更新的，数据变了页面是不会跟着变的，如果想直接操作数组必须通过数组的7个api方法去操作才可以，分别是push、pop、shift、unshift、splice、sort、reverse
修改可以splice，新增可以push、unshift、splice，根据需要使用、删除可以splice、unshift、pop，根据需要使用
或者直接改引用，让数组指向另一个内存空间，如下
或者用Vue的set方法去新增、修改数据，用Vue的delete方法去删除数据
也可以用Vue.delete(vm.list, 1);//删除下标为1位置的数据
当然，set方法和delete方法不仅仅是Vue中的全局方法，也是实例方法，这个我们放在第二个例子讲解。
综上所述，数组要能直接触发视图更新在页面上渲染出来的方法
1.利用数组的api方法
2.改变数组指向的内存地址（改引用）
3.利用Vue的set、delete方法操作数组（推荐）
对象中数据渲染后的修改、新增、删除问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象数据渲染问题
</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<div v-for="item of userInfo">
{{item}}
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
userInfo:
{
name:"lcy",
age:25,
gender:"male",
salary:"secret"
}
}
})
</script>
</body>
</html>运行结果
我们来尝试修改一下数据试试
看来这里仅仅可以修改对象里面已存在属性的数据触发更新，比数组强了点，数组修改数据也无法触发视图更新。
我们根据数组修改数据可以知道，要想触发视图更新，我们可以改变内存地址，比如这里的userInfo对象修改如下
这还却是可以，但是我们一般都不会去更改对象，我们可以用Vue.set方法来改变数据
删除可以用Vue.delete(vm.userInfo, 'age'),如图,age属性就没了
想用set方法直接设置为""或者undefined是无效的，只是赋值，但是对象属性还在
当然，set和delete不仅是Vue上面的全局方法，也是一个实例方法
比如Vue.set(vm.userInfo, "address", "shenzhen"); // 新增属性
等同于vm.$set(vm.userInfo, "address", "shenzhen");
比如Vue.delete(vm.userInfo, "age")
等同于vm.$delete(vm.userInfo, "age")
经过我的测试这都是可以的，根据需要使用
综上所述
虽然修改数组、对象中的数据都可以直接改变引用地址实现，但是不推荐。
直接修改数据的方法就是对象可以，数组不可以，但是这种操作不考虑，也不要用这种方法去打擦边球。
更加推荐的是利用Vue中的set、delete方法去实现修改、新增、删除数据。