Vue 的双向数据绑定,使得修改数据后,视图就会跟着发生更新,比如对数组进行增加元素、切割等操作。然而直接通过下标修改数组内容后,视图却不发生变化。那么,在保留原有的数组响应方式下,为什么 Vue 不增加对数组下标的响应式监听呢?
arr[index] = val 不是响应式的
在 Vue 官网的 列表渲染 — Vue.js 中,有强调 Vue 不能 直接检测通过数组下标改变值的变化,需要通过 数组更新检测 来实现。
<template>
<div>
<span v-for="i in arr">{
{ i }}</span>
<button @click="updateIndex">改变下标对应的值</button>
<span v-for="key in Object.keys(obj)">{
{ obj[key] }}</span>
<button @click="updateKey">改变key对应的值</button>
</div>
</template>
<script>
export default {
data() {
return {
arr: [ 1, 2, 3, 4 ],
obj: {
a: 1, b: 2, c: 3, d: 4 }
}
},
methods: {
updateIndex() {
this.arr[0]++ // 对数组这样的操作不会引起视图的更新
// this.arr.splice(0, 0) // 需要调用数组的方法,才能使视图更新
},
updateKey() {
this.obj