vue对数组的更新检测

最近公司项目开始用vue,在使用过程中遇到一个坑:更改data中数组中的值不能在页面响应

data() { return { beforeImgs: [ 'url(//h0.hucdn.com/open/201830/3fbe4ce353502536_336x173.png)', 'url(//h0.hucdn.com/open/201830/4d9db33c740ca67d_333x174.png)', 'url(//h0.hucdn.com/open/201830/5412527740bbfa25_184x181.png)', 'url(//h0.hucdn.com/open/201830/4e1cd898dc7c7e10_153x183.png)', 'url(//h0.hucdn.com/open/201830/e2388362ed573c41_155x183.png)', 'url(//h0.hucdn.com/open/201830/d12e8001be6108d1_176x183.png)', ], afterImgs: [ 'url(//h0.hucdn.com/open/201830/11b0695defc0d799_336x173.png)', 'url(//h0.hucdn.com/open/201830/55d604a098bf552d_333x174.png)', 'url(//h0.hucdn.com/open/201830/c63051b6284a9ea7_184x181.png)', 'url(//h0.hucdn.com/open/201830/f3b7cf08723fa5cc_153x183.png)', 'url(//h0.hucdn.com/open/201830/a5607cc96af0c0e0_155x183.png)', 'url(//h0.hucdn.com/open/201830/bc10d54f490b6dfd_176x183.png)', ], } }, mounted() { this.init(); }, methods: { init() { this.beforeImgs[0] = this.afterImgs[0]; }, },

后来我在官网找到这样的原因

vue对数组的更新检测
文章图片

【vue对数组的更新检测】但是可以使用splice方法改变数组
this.beforeImgs.splice(0, 1, this.afterImgs[0]);

    推荐阅读