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

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

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
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值