Vue基础教程（22）ECMAScript 6语法之展开运算符：Vue开发必备：ES6展开运算符，让你告别“复制粘贴”式编程！

Vue开发必学：ES6展开运算符

原创于 2025-09-27 14:28:34 发布 · 317 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #ecmascript #es6

Vue基础教程专栏收录该内容

219 篇文章

订阅专栏

嘿，哥们儿姐们儿！是不是经常在Vue项目里看到三个小点点（…）的语法，感觉似懂非懂？别慌，今天咱们就来深扒这个ES6里的“神器”——展开运算符。它可不是什么高深莫测的黑科技，而是能让你告别“复制粘贴”式编程的利器！

想象一下：你手里有一堆数据，像扑克牌一样叠在一起，而展开运算符就像电影里的赌神，“唰”一下把牌铺开，每张都清晰可见。在Vue开发中，它能让你的代码更简洁、更易读，甚至能避免一些隐形的bug。不信？那跟着我一起往下看！

一、展开运算符是啥？先来个“傻瓜式”入门

简单说，展开运算符就是三个点（…），它能像拆快递一样，把数组或对象里的内容“拆开”摊平。比如，你有个数组[1, 2, 3]，用…一展开，就成了独立的1, 2, 3。这有啥用？举个例子：

// 以前合并数组，得用concat或者循环
const arr1 = [1, 2];
const arr2 = [3, 4];
const oldWay = arr1.concat(arr2); // [1, 2, 3, 4]

// 现在用展开运算符，直接“铺开”就行！
const newWay = [...arr1, ...arr2]; // [1, 2, 3, 4]
console.log(newWay); // 结果一样，但代码是不是更直观？

注意点：展开运算符是“浅拷贝”。比如数组里嵌套了对象，复制后新数组里的对象还是指向原来的内存地址（这点稍后会细说）。

二、Vue中的实战场景：告别“手酸”代码

在Vue项目里，展开运算符简直是无处不在的“万金油”。下面这几个场景，你肯定遇到过！

场景1：组件传参——不用再写一长串props！

假设你有个UserCard组件，需要接收用户信息：

<!-- 以前：每个prop都得单独传，手都写酸了 -->
<UserCard :name="user.name" :age="user.age" :avatar="user.avatar" />

<!-- 现在：用展开运算符直接“铺开”整个user对象 -->
<UserCard v-bind="user" />
<!-- 等价于 :name="user.name" :age="user.age" ... -->

注意：如果user对象里有多余字段，Vue会自动忽略，不会报错。但最好确保props名和对象键名匹配！

场景2：Vuex状态管理——合并状态so easy！

在Vuex中更新状态时，我们常需要保持响应式。展开运算符能帮你优雅地合并数据：

// 在Vuex的mutation中更新state
state: { user: { name: 'Tom', age: 20 } },
mutations: {
  updateUser(state, newData) {
    // 传统写法：手动赋值每个字段，累！
    // state.user.name = newData.name;
    // state.user.age = newData.age;

    // 展开运算符写法：保持响应式，一键合并！
    state.user = { ...state.user, ...newData };
    // 比如newData是{ age: 21 }，结果就是{ name: 'Tom', age: 21 }
  }
}

这里用了对象展开，后者的属性会覆盖前者的同名属性，类似Object.assign。

场景3：组合式API（Vue 3）——逻辑复用更清爽！

Vue 3的setup函数里，展开运算符能让逻辑复用更灵活：

import { reactive, toRefs } from 'vue';

// 一个自定义Hook，返回响应式数据和方法
function useCounter() {
  const state = reactive({ count: 0 });
  const increment = () => state.count++;
  return { ...toRefs(state), increment }; // 展开响应式数据和方法
}

// 在组件中直接使用
setup() {
  const { count, increment } = useCounter();
  return { count, increment };
}

三、进阶玩法：展开运算符的“骚操作”

除了基础用法，展开运算符还能玩出花来！比如：

1. 浅拷贝的妙用：快速复制数据

const original = [{ id: 1 }, { id: 2 }];
const copy = [...original]; // 浅拷贝数组
copy[0].id = 999; 
console.log(original[0].id); // 999！因为对象是引用复制

// 深拷贝需要其他方法，但浅拷贝在Vue中常用来触发响应式更新

2. 配合解构赋值：“拆”数据更精准

const user = { name: 'Alice', age: 25, role: 'admin' };
const { role, ...rest } = user; // 拆出role，剩下的放进rest
console.log(rest); // { name: 'Alice', age: 25 }

// 在Vue中过滤props时特别有用！

四、避坑指南：这些细节别踩雷！

浅拷贝问题：如果嵌套结构很深，修改复制后的数据可能影响原数据。需要深拷贝时用JSON.parse(JSON.stringify())或工具库。
性能注意：大数组或对象频繁展开可能影响性能，但日常使用无需过度优化。
浏览器兼容：现代框架如Vue通常配合构建工具（如Webpack），会处理兼容性问题。

五、完整示例：一个Vue任务管理器

下面用个实际例子巩固一下：

<template>
  <div>
    <input v-model="newTask" @keyup.enter="addTask" />
    <TaskItem v-for="task in tasks" :key="task.id" v-bind="task" @delete="removeTask" />
  </div>
</template>

<script>
import { reactive } from 'vue';
export default {
  setup() {
    const state = reactive({
      tasks: [{ id: 1, text: '学Vue', done: false }],
      newTask: ''
    });

    const addTask = () => {
      if (!state.newTask) return;
      state.tasks = [...state.tasks, { 
        id: Date.now(), 
        text: state.newTask, 
        done: false 
      }]; // 展开旧任务，添加新任务
      state.newTask = '';
    };

    const removeTask = (id) => {
      state.tasks = state.tasks.filter(task => task.id !== id); // 过滤删除
    };

    return { ...state, addTask, removeTask };
  }
};
</script>