展开运算符 (...)：这是 JavaScript 中的一个语法，用于将数组或对象展开到另一个数组或对象中。

啊·贤2024-11-11 2:37

假设我们有以下代码片段：

javascript 复制代码

import { ref } from 'vue';

const searchParams = ref({
  query: '',
  page: 1,
  sort: 'asc'
});

// 在某个地方调用函数并传递 searchParams.value
someFunction(...searchParams.value);

详细解释：

import { ref } from 'vue'; ：从 Vue 库中导入 ref 函数。
const searchParams = ref({ ... }); ：创建一个响应式的 searchParams 对象，初始值为 { query: '', page: 1, sort: 'asc' }。
searchParams.value ：访问 searchParams 对象的值部分。由于 ref 返回的是一个包含 .value 属性的对象，所以 searchParams.value 是 { query: '', page: 1, sort: 'asc' }。
someFunction(...searchParams.value); ：使用展开运算符将 searchParams.value 对象的属性作为参数传递给 someFunction 函数。

假设 someFunction 的定义如下：

javascript 复制代码

function someFunction(query, page, sort) {
  console.log('Query:', query);
  console.log('Page:', page);
  console.log('Sort:', sort);
}

当执行 someFunction(...searchParams.value); 时，相当于调用

javascript 复制代码

someFunction('', 1, 'asc');

输出结果将是：

javascript 复制代码

Query: 
Page: 1
Sort: asc

总结

searchParams.value 获取的是 ref 包装后的实际对象值。
...searchParams.value 使用展开运算符将对象的属性展开为独立的参数传递给函数。
这种用法常用于需要将对象的属性分别传递给函数的场景。