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];
        },
},

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

但是可以使用splice方法改变数组

this.beforeImgs.splice(0, 1, this.afterImgs[0]);