Vue中数组与对象的检测？

互联网/前端

88次点击 · 1206天前 · 梦在深巷

1条回答我要回复

嗨皮hi1206天前

关于监测数组与对象的变动

一.数组的更新监测
下面的方法,修改数组,可以引起视图更新渲染(因为数组与页面绑定的关系，即会导致页面改变)。
push（尾部插入）, pop（尾部删除）, unshift（头部插入）, shift（头部删除）, splice, sort（排序）, reverse（倒叙输出）
注意事项:
1.当使用filter, map, contact, slice, 返回值都是新数组,不会引起页面更新, 除非在给原来的数组赋一次值
2.this.arr[index]=newValue,不会引起页面渲染,*(注意:this.arr[index].属性名=新的属性值,会引起页面渲染)
Vue.set(实例中的数组或对象,下标/key,更新的值) 推荐使用该方式,优点：不用区分实例对象
Vm1.$set(实例中的数组或对象,下标/key,更新的值)

二.对象的更新监测
通过键,更新value的值,可以引起页面刷新, 但是需要注意的是: 对已有对象再次更新或删除键值对,不会引起页面渲染。
新增键值对方法:
新增一个键值对: Vue.set(实例中的对象,key,更新的值) 新增多个键值对: Object.assign({},this.girl,{多个键值对})

三.代码示例<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>数组与对象监测(常用)</title>
<script src="
<style>
ul {
display: inline-block;
list-style: none;
}
</style>
</head>

<body>
<div id="app">
<hr>
<ul v-for="stu in aStudents">
<li>
{{stu.name}}
</li>
<li>
{{stu.age}}
</li>
<li>
{{stu.gender}}
</li>
</ul>

<p>{{fruits[1]}}</p>
<button @click="doChange">{{btnText}}</button>

<hr>
<ul>
<li v-for="(v, k) in girl">
属性:{{k}}-属性值:{{v}}
</li>
</ul>
<br>
<button @click="add">新增键值对</button>
<button @click="del">删除键值对</button>
<hr>
</div>
</body>

</html>
<script>
let vm1 = new Vue({
el: '#app',
data: {
aStudents: [{
name: '张娟',
age: 18,
gender: 'female'
},
{
name: '李强',
age: 20,
gender: 'male'
},
{
name: '王霞',
age: 30,
gender: 'female'
}
],
fruits: [
'苹果',
'香蕉',
'梨子',
'橘子',
'西瓜',
'芒果'
],
girl: {
name: '赤练',
age: 18,
height: 185
},
btnText: '点击改变值'
},
methods: {
doChange() {
// A.this.arr[index].属性名=新的属性值,会引起页面渲染
//this.aStudents[0].name = '惊鲵';

// B.this.arr[index]=newValue,不会引起页面渲染
//this.aStudents[0] = {name: '李斯'};
//this.fruits[0] = '桃子';

// 第一种
Vue.set(this.fruits, 0, '桃子');
console.log(this);
// this指当前创建出来的实例本身

// 注意：以下参数分别为（实例中的数组或对象,下标/key,更新的值），两种写法等价，如下：
vm1.$set(this.fruits, 1, '桃子');
Vue.set(this.aStudents, 0, {
name: '谢燕',
age: 25,
gender: 'female'
})
this.btnText = '已改变值'
},
add() {
// 新增多个键值对,方法一:
Vue.set(this.girl, 'gender', 'female');
Vue.set(this.girl, 'hobby', '阅读');
// 新增多个键值对,方法二:
this.girl = Object.assign({}, this.girl, {
gender: 'female',
hobby: '阅读'
});
},
del() {
// 删除键值对
// delete this.girl.name;
// 注意：以下参数分别为（对象，key值）
vm1.$delete(this.girl, 'name');
}
}
});
</script> 四.效果图
点击“点击改变值”前后对比

点击“增加键值对”“删除键值对”前后对比图