【VUE】关于修改数组后，页面不渲染的问题

首先要解决这个问题，我们要清楚产生这个问题的原因。

vue之所以能够监听Model的变化，是因为Javascript语言本身提供了Proxy或者Object.observe()的机制来监听对象状态的变化。

但是，对于数组元素的赋值却没有办法直接进行监听，因此会产生以下情况：

比如我们vue的data里创建一个json数组：

list:[
        {"name":"苹果"},
        {"name":"橘子"},
        {"name":"香蕉"}
     ],

此时循环输出以后，页面会渲染出的画面

 

 

然后我们设置一个按钮点击触发改变数组的操作

change(){
     console.log("change");
     this.list[0]={"name":"小猪"};
}

此时触发事件后你会发现页面没有变化。

个人观点是因为json是个对象，你改变对象的自身属性，对它是个对象的事实并没有产生影响，所以vue检测不到变化。

如果想要改变数组，那我们不应该用赋值的方法而是应该用更新来使数组改变

1、用  this.list[0].name = "小猪"  来更新数组

2、将整个list数组更换掉

3、用vue能监听到的操作来更新数组  比如：splice  push  unshift 等

4、使用this.$set( target , key , value ); 强制渲染页面

      target：要更改的数据源（可以是对象或者数组）；

      key：要更改的具体数据

      value：重新赋的值

以上只是在项目中遇到的自己的解决思路，有更好方法的欢迎留言