Vue.js 是否有内置方法将持久对象的副本添加到重复数组

Question

我有一个 Vue.js 应用程序，我在其中对一组项目进行了 v-repeat。我想将一个 newItem 添加到项目列表中。当我尝试 this.items.push(this.newItem) 时，推送的对象仍然绑定到输入。考虑以下：

new Vue({
  el: '#demo',

  data: {
    items: [
      {
        start: '12:15',
        end: '13:15',
        name: 'Whatch Vue.js Laracast',
        description: 'Watched the Laracast series on Vue.js',
        tags: ['learning', 'Vue.js', 'Laracast', 'PHP'],
        note: "Vue.js is really awesome. Thanks Evan You!!!"
      },
      {
        start: '13:15',
        end: '13:30',
        name: "Rubik's Cube",
        description: "Play with my Rubik's Cube",
        tags: ['Logic', 'Puzzle', "Rubik's Cube"],
        note: "Learned a new algorithm."
      }
    ],
    newItem: {start: '', end: '', name: '', description: '', tags: '', note: ''}
  },

  methods: {
    addItem: function(e) {
      e.preventDefault();

      this.items.push(this.newItem);
    }
  }
});

如预期的那样，上面的代码会将绑定的对象推入 items 数组。问题是我只想要一个对象的副本，这样当输入改变时它就不会再改变了。看到这个 this fiddle。我知道我能做到：

addItem: function(e) {
  e.preventDefault();
  this.items.push({
    name:        this.newItem.name,
    start:       this.newItem.start,
    end:         this.newItem.end,
    description: this.newItem.description,
    tags:        this.newItem.tags,
    notes:       this.newItem.notes
  })
}

This works不过是很多重复。

问题：是否有一种内置方法可以只添加对象的副本而不是持久对象。

Answer 1

参见 GitHub 上的 this issue。

浅克隆

我一直在使用 jQuery 的 $.extend，直到 Evan You 指出有一个未记录的内置它扩展函数 Vue.util.extend 可以进行浅层克隆。所以你可以使用的是：

addItem: function(e) {
  e.preventDefault();

  this.items.push(Vue.util.extend({}, this.newItem));
}

参见updated Fiddle。

深度克隆

在对引用其他对象的对象执行浅克隆时，您将引用复制到外部对象而不是克隆它们。要完全克隆对象，请执行 Deep Clone.

对于深度克隆，根据 Evan 在第一个 link 中的建议，可以使用：JSON.parse(JSON.stringify(object))。这可以在this fiddle and this fiddle.

之间看到

如果使用 lodash，请查看 lodash cloneDeep. If using NPM check out clone-deep。

Answer 2

这对我不起作用（vue 1.0.13）。我使用以下方法创建了一个没有数据绑定的副本：

this.items.push( JSON.parse( JSON.stringify( newItem ) ) );

Answer 3

您可以将 Vanilla JavaScript 与 Object.assign():

一起使用

addItem: function(e) {
  e.preventDefault();

  this.items.push(Object.assign({}, this.newItem));
}

更新：

您还可以使用对象传播：

addItem: function(e) {
  e.preventDefault();

  this.items.push({...this.newItem});
}

Answer 4

最上面的答案是错误的。 Vue.util.extend 与 jQuery 的扩展无关。它始终是一个浅层克隆。 https://github.com/vuejs/vue/issues/1849#issuecomment-158770874

Object.assign和Spread算子也是浅拷贝。看到这个 https://scotch.io/bar-talk/copying-objects-in-javascript

只需使用Ramda.js的实现 https://github.com/ramda/ramda/blob/v0.26.1/source/internal/_clone.js

_curry 不需要，如果你不想要的话。

或者检查这个 MVA What is the most efficient way to deep clone an object in JavaScript?

Vue.js 是否有内置方法将持久对象的副本添加到重复数组

Does Vue.js have a built in way to add a copy of a persistent object to a repeated array

javascript

vue.js