Vue直接修改对象中的值不会触发视图更新的问题及解决措施

首先需要了解到：
只有在data(){return{}}中初始化的数据才是响应的
Vue并不能检测到对象属性的添加或删除
那么解决这个问题就很简单了

实例问题

在项目的某个阶段 需要修改一个对象中的某个值来触发视图更新来展示新的效果 但是直接修改代码的时候 发现并没有触发视图更新，此时百度到有一种方法为$set，但是研究了半天也没明白写法 索性就放弃了，并找了一种极为原始的方法 代码如下

在刚开始给数组里的一个对象添加了一个叫show的属性 为后面的错误埋下了伏笔
希望通过改变show的值来改变页面的展示效果
其实也就是显示或者隐藏
但是在直接修改值的时候发生了一些问题
比如这样修改
this.coreList[index].show=!this.coreList[index].show
并不会触发视图更新
此时我想到了刷新一下页面再看效果
但是刷新页面之后又会回到刚开始赋值的结果（比如刚开始我设置的值为this.coreList[i].show=false）
为了看我这种方法能不能修改它的结果 我选择
console.log(this.coreList[index].show)
此时显示我是可以修改它的值的  但是并不会在页面展示效果
后来了解到一个问题 只有在data(){return{}}中初始化的数据才是响应的，Vue并不能检测到对象属性的添加或删除
知道了问题的根源 解决起来就比较简单了

Vue本身提供了一种方法：
Vue不允许在已经创建的实例上动态添加根级响应式属性
但是可以使用$set方法将相应属性添加到嵌套的对象上。

Vue.$set(Object,key,value)

方法进行修改 将响应属性添加到嵌套的对象上便可以实现对应的效果了
此外 还有另一个办法
比如这样

let obj=this.coreList[index];  
	obj.show=!obj.show;
	this.coreList.splice(index,1,obj);

通过修改数组中具体的某一个属性并使用splice()方法删除原本的属性再将修改后的值添加上去
也可以实现效果

众所周知 splice()方法会改变原始数组，了解到这个 基本就能理解上面这简单的三行代码了。