浅探 Vue 为什么不增加数组下标响应式

最新推荐文章于 2023-02-16 16:37:46 发布

原创

最新推荐文章于 2023-02-16 16:37:46 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #响应式 #js #数组 #双向数据绑定

本文探讨Vue为什么不支持直接通过数组下标实现响应式更新，从源码分析Vue对数组的Observer实现，说明Vue仅监听数组元素而非下标，通过修改源码实现下标响应式并实验其对性能的影响。实验表明，增加数组下标响应式会随着循环次数增加带来显著的性能损耗，因此Vue推荐使用数组更新检测方法。

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