无法使用为 vue cli 3 设置添加的 babel-plugin-transform-object-rest-spread 传播对象

Question

这是我试图让它工作的部分代码

const myarr = [
        {a: 'haha',},
        {b: 'yoyo',}
      ];
      const myobj = {
        a: 'some',
        b: 'kind',
      };
      console.log(myarr);
      play(...myobj);
      console.log(props);

所以它不会有传播数组的问题，但是当我通过传播一个对象时，我会收到错误

TypeError：传播不可迭代实例的尝试无效

我在配置中添加了babel-plugin-transform-object-rest-spread 插件，但是，同样的错误。

这是怎么回事？

这是我要复制的回购：https://github.com/adamchenwei/vue-hoc-playground 检查文件/src/components/decorator/withCustomComponent.js 代码：

export default function withCustomComponent(InnerComponent) {
  return {
    mounted() {
      console.log('withCustomComponent is mounted');
    },
    render() {
      const myarr = [
        {a: 'haha',},
        {b: 'yoyo',}
      ];
      const myobj = {
        a: 'some',
        b: 'kind',
      };
      console.log(myarr);
      play(myobj);
      console.log(props);
      return <InnerComponent
        class="myinner"
        data-event="load"
        />;
    }
  }
}

export const WithCustom = {
  name: 'WithCustom',
  render() {
    const Slott = this.$slots.default[0];
    // return  <Slott />;
    return this.$slots.default[0];
    // return <h1>slott</h1>;
  }
};

function play({a,b}) {
  console.log('play')
  console.log(JSON.stringify(a));
  console.log(`${a} ${b}`);
}

function fakeCall(params, callback) {
  setTimeout(() => {
    callback('https://avatars0.githubusercontent.com/u/6078720?s=200&v=4')
  }, 1000);
}

关于对象扩展运算符的文档 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals

Answer 1

AFAIK，您不能使用扩展运算符将对象作为参数传递给函数；这背后的原因之一是 Javascript 函数没有对命名参数的原生支持，这使得无法通过名称匹配参数；一种解决方法是在 play 函数中使用解构语法，如下所示：

function play({ a, b }) {
  console.log('play')
  console.log(JSON.stringify(a));
  console.log(`${a} ${b}`);
}

然后你可以调用它：play(myobj)。