背景：在vue开发中会遇到data数据更改后view试图不会进行响应式更新的情况
以下4种情况不触发vue响应式更新！！
不能检测到的数组变动是：
1、当利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue；
2、当修改数组的长度时，例如：vm.items.length = newLength；
不能检测到的对象变动是：
3、向响应式对象添加属性；
4、向响应式对象删除属性；
解决方案：
demo:
<template>
<div class="hello">
<div v-for="(item,index) in students" :key="index">
<span>姓名:{{item.name}} </span> /
<span>年龄:{{item.age}}</span> /
<span>索引:{{index}}</span>
</div>
<hr>
<span v-for="(prop,index) in oneTeacher" :key="index"> {{prop}} / </span>
<hr>
<p><button @click="changeArr()">点击正常修改对象属性</button></p>
<p>视图无响应：
<button @click="indexChangeProp()">点击使用索引修改数组内容</button>
<button @click="lengthChangeProp()">点击更改对象length数组长度</button>
<button @click="addProp()">点击向响应式对象添加属性</button>
<button @click="deleteProp()">点击向响应式对象删除属性</button>
</p>
<hr>
<p>对应解决方法：
<button @click="changeArr()">js完全替换掉数组</button>
<button @click="methodsChangeArr()">使用JavaScript方法可以获取修改后返回的新数组</button>
<button @click="setChangeprop()">使用vue的set方法向响应式对象添加属性</button>
<button @click="deletChangeprop()">使用vue的delete方法向响应式对象删除属性</button>
<button @click="assignChangeprop()">使用JS的Object.assign({},o1,o2)方法向对象添加属性</button>
</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
students:[
{name:"张三",age:27},
{name:"李四",age:29}
],
oneTeacher:{name:"诸葛孔明",age:1000}
}
},
methods:{
//该函数中直接进行了数组替换，大量数据处理时不合适
changeArr:function(){
let that=this;
that.students=[
{name:"张三",age:18},
{name:"李四",age:18}
]
},
//根据索引修改数组对象,视图没有更新
indexChangeProp:function(){
let that=this;
that.students[0]={name:"王五",age:33};
console.log(that.students);
},
//改变数组长度,视图没有更新
lengthChangeProp:function(){
let that=this;
that.students.length=5;
console.log(that.students);
},
//向响应式对象添加属性,视图没有更新
addProp:function(){
let that=this;
that.oneTeacher.studentNum=100;
console.log(that.oneTeacher);
},
//向响应式对象删除属性,视图没有更新
deleteProp:function(){
let that=this;
delete that.oneTeacher.age;
console.log(that.oneTeacher);
},
//使用JavaScript的数组方法获取返回的数组
methodsChangeArr:function(){
let that=this;
let newStudent={name:"小乔",age:16};
that.students.push(newStudent);
console.log(that.students);
},
//使用vue的set方法向响应式对象添加属性
setChangeprop:function(){
let that=this;
that.$set(that.oneTeacher,"studentNum","200个学生");
console.log(that.oneTeacher);
},
//使用vue的delete方法向响应式对象删除属性
deletChangeprop:function(){
let that=this;
that.$delete(that.oneTeacher,"age");
console.log(that.oneTeacher);
},
//assign()方法合并多个对象返回新的对象进而达到添加对象属性的效果
assignChangeprop:function(){
let that=this,obj1,newObj;
obj1={sex:"男"};
//newObj=Object.assign(that.oneTeacher,obj1); //无效，并未替换原有对象
newObj=Object.assign({},that.oneTeacher,obj1);
that.oneTeacher=newObj;
console.log(that.oneTeacher);
},
}
}
</script>
解决方法总结：
1、创建新的数组替换原有数组值
2、使用JavaScript的数组操作函数，这些方法都会返回一个新数组，也是数组替换原理；
3、使用vue自带的 vue.set(object , key , value );?向响应式对象添加属性；
4、使用vue自带的 vue.delete(object , key );?向响应式对象删除属性；
5、对象添加属性还可以使用Object.assign({},obj1,obj2)返回获取的新对象替换原有对象；
附加能监听到的：
- push() - pop() - shift() - unshift() - splice() - sort() - reverse()