当前位置：首页 > VUE

vue实现数组监听

2026-02-17 19:32:42VUE

Vue 实现数组监听的方法

Vue 通过重写数组的原型方法来实现对数组变化的监听，确保数组操作能够触发视图更新。以下是具体实现方式和注意事项：

重写数组方法

Vue 对以下数组方法进行了拦截和重写，使其能够触发响应式更新：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

重写后的方法会在调用原生数组方法后，通知依赖进行更新。例如：

const originalArrayProto = Array.prototype
const arrayProto = Object.create(originalArrayProto)

['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(method => {
  arrayProto[method] = function(...args) {
    const result = originalArrayProto[method].apply(this, args)
    const ob = this.__ob__
    ob.dep.notify()
    return result
  }
})

直接修改数组索引

直接通过索引修改数组元素不会触发响应式更新：

this.items[index] = newValue // 不会触发更新

需要改用 Vue.set 或数组的 splice 方法：

Vue.set(this.items, index, newValue)
// 或
this.items.splice(index, 1, newValue)

监听数组长度变化

修改数组长度属性也不会触发更新：

this.items.length = newLength // 不会触发更新

应使用 splice 方法：

this.items.splice(newLength)

深层数组监听

对于嵌套数组，Vue 会递归地对每个元素进行响应式处理：

vue实现数组监听

data() {
  return {
    nestedArray: [
      [1, 2],
      [3, 4]
    ]
  }
}

注意事项

使用 Vue.set 或 this.$set 添加新元素到数组
避免直接设置数组长度
对于大型数组，考虑使用不可变数据方式更新
对象数组的属性修改需要使用 Vue.set 或确保属性是响应式的

Vue 的数组监听机制使得开发者能够方便地处理数组变化，同时需要注意某些特殊情况的处理方式。

标签: 数组 vue

分享给朋友：

vue实现下拉刷新组件

实现下拉刷新组件的核心思路下拉刷新功能通常通过监听触摸事件、滚动位置和动画效果实现。Vue中可以利用自定义指令或封装组件完成，以下为两种常见实现方式。基于自定义指令的实现创建指令监听触摸事件，…

vue实现过程

Vue 的实现过程 Vue 的实现过程可以分为多个核心模块，包括响应式系统、虚拟 DOM、模板编译等。以下是 Vue 的主要实现过程分析。响应式系统 Vue 的响应式系统基于 Object.def…

vue实现引导

Vue 实现引导功能的方法使用第三方库推荐使用 driver.js 或 intro.js 这类专门为 Vue 设计的引导库。这些库提供了完整的 API 和样式，能够快速实现引导功能。安装 dr…

vue实现画图

Vue 实现画图功能在 Vue 中实现画图功能通常需要结合 HTML5 的 <canvas> 元素或第三方库。以下是几种常见的方法：使用原生 Canvas API 通过 Vue 直接…

实现vue table

Vue 表格实现方法基础表格实现使用 Vue 的 v-for 指令可以快速渲染表格数据。在模板中定义表格结构，通过数据绑定动态生成行和列。 <template> <tabl…

vue实现radio

Vue 实现 Radio 按钮在 Vue 中实现 Radio 按钮可以通过 v-model 进行数据绑定，结合 input 元素的 type="radio" 属性。以下是一个基本示例： <t…

vue实现数组监听