数组传递 数据绑定 vue 传数组—Vue传数组的核心方法与实现技巧

Vue传数组的核心方法与实现技巧：让数据流动更自然

场景引入：父子组件间的“购物车难题”

假设你正在开发一个电商项目,父组件是商品列表页，子组件是购物车弹窗，当用户勾选多个商品时，需要将选中的商品数组从父组件传递给子组件展示，这时候你可能会遇到：

1. 直接传递数组后,在子组件修改却无法同步回父组件
2. 使用深拷贝导致性能问题
3. 数组元素是对象时,监听不到内部变化

别担心,下面这些方法能帮你轻松解决这些问题。

基础传值：props直接传递

最简单的数组传递方式,适合只读场景：

<!-- 父组件 -->
<template>
  <ChildComponent :items="shoppingList" />
</template>
<script>
export default {
  data() {
    return {
      shoppingList: ['苹果', '香蕉', '牛奶']
    }
  }
}
</script>
<!-- 子组件 -->
<script>
export default {
  props: ['items'], // 接收数组
  mounted() {
    console.log(this.items) // ['苹果', '香蕉', '牛奶']
  }
}
</script>

⚠️ 注意：直接修改子组件中的props数组会触发Vue警告（避免直接修改prop）

需要双向绑定时

方法1：v-model + 数组引用特性

利用对象/数组的引用特性实现伪双向绑定：

<!-- 父组件 -->
<template>
  <ChildComponent v-model="shoppingList" />
</template>
<!-- 子组件 -->
<script>
export default {
  props: ['value'], // v-model默认传递value
  methods: {
    removeItem(index) {
      const newArr = [...this.value] // 创建新数组
      newArr.splice(index, 1)
      this.$emit('input', newArr) // 触发更新
    }
  }
}
</script>

方法2：.sync修饰符（Vue 2.x）

<!-- 父组件 -->
<ChildComponent :items.sync="shoppingList" />
<!-- 子组件 -->
<script>
export default {
  props: ['items'],
  methods: {
    updateList() {
      this.$emit('update:items', [...this.items, '新商品'])
    }
  }
}
</script>

复杂场景：深度监听数组变化

当数组元素是对象时,需要特殊处理才能监听到变化：

方案1：Vue.set / $set

// 在子组件中修改对象数组的某个属性
this.$set(this.items, index, { ...this.items[index], count: newCount })

方案2：使用计算属性返回新引用

computed: {
  processedItems() {
    return this.items.map(item => ({ ...item })) // 返回新对象
  }
}

性能优化技巧

处理大型数组时,这些方法能提升性能：

1. 冻结静态数组：

   this.items = Object.freeze([...]) // 防止Vue添加响应式开销

2. 分片更新：

   // 分批更新大型数组
   function chunkUpdate(arr) {
     const chunkSize = 100
     for (let i = 0; i < arr.length; i += chunkSize) {
       this.items = [...this.items, ...arr.slice(i, i + chunkSize)]
       await nextTick() // 让UI有机会更新
     }
   }

终极方案：Vue 3的响应式API

Vue 3的reactive和toRefs让数组处理更灵活：

import { reactive } from 'vue'
// 父组件
const state = reactive({
  items: ['a', 'b', 'c']
})
// 子组件通过props接收后仍保持响应性
function addItem() {
  props.items.push('new') // 安全操作
}

选择合适的方法

记住关键原则：保持数据流的可预测性，根据实际需求选择最简实现，遇到坑时，想想是引用问题还是响应式原理问题，对症下药即可！

（本文方法基于Vue 2.6+和Vue 3.2+版本验证，2025年7月仍为最佳实践）