如何在Vue.js中解绑定数组副本

How to unbind an array copy in Vue.js

本文关键字：绑定 数组 副本 js Vue      更新时间：2023-09-26

我正试图将一个数组复制到另一个数组，并像使用新数组一样使用它，而不需要对旧数组进行任何更改:

<div id="app">
    <div class="form-group">
       <label>Test input</label>
       <input v-model="testArray[0].name" type="text" class="form-control" placeholder="Input">
    </div>
    <br>
    <pre>testArray: {{ testArray[0] | json}}</pre>
    <pre>templateArray: {{ templateArray[0] | json  }}</pre>


new Vue({
  el: '#app',
  data: {
      testArray: [],
      templateArray: [{name: "TEST"},], 
  },
  ready: function() {
      this.testArray = this.templateArray.slice(0);
    },
});

问题是，然后我更新新的数组'testArray'，我也改变旧的数组'templateArray'。

正在运行的脚本:https://jsfiddle.net/4po1cpkp/7/

是否有办法创建新的数组基于数组模板不直接绑定到模板?

正如Vue.js文档所说:

在底层，Vue.js附加了一个隐藏属性__ob__和递归地将对象的可枚举属性转换为getter以及启用依赖项收集的设置。具有以下键的属性以$或_开头的会被跳过。

你可以存储你的名字从下划线开始的模板数组:

  data: {
      testArray: [],
      _templateArray: [{ name: "TEST" }]
  },
  ready: function() {
      this.testArray = this.$data._templateArray;
  }

或者你需要它作为Vue.js对象:

this.testArray = JSON.parse(JSON.stringify(this.templateArray));

我使用Vue扩展函数Vue.util.extend来复制Vue 2中的非绑定数组:

this.items_list.push(Vue.util.extend({}, this.list_item));

OPTION 1

你应该通过使用JavaScript concat()函数将数据分配给testArray，将旧数组复制到新数组，就像这样，如果你使用小数组数据，使用这个:

this.testArray = [].concat(this.templateArray);

选项2

你可以使用ES6的扩展运算符来合并多个数组，像这样:

this.testArray = [...[],...this.templateArray]

选项3(用于大数据)

const MAX_BLOCK_SIZE = 65535; // max parameter array size for use in Webkit
export function appendArrayInPlace(dest: [], source: []) {
    let offset = 0;
    let itemsLeft = source.length;
    if (itemsLeft <= MAX_BLOCK_SIZE) {
        dest.push.apply(dest, source);
    } else {
        while (itemsLeft > 0) {
            const pushCount = Math.min(MAX_BLOCK_SIZE, itemsLeft);
            const subSource = source.slice(offset, offset + pushCount);
            dest.push.apply(dest, subSource);
            itemsLeft -= pushCount;
            offset += pushCount;
        }
    }
    return dest;
}

选项3此处输入链接描述

您可以在MDN中使用数组原型的slice()。array .prototype.slice()

this.testArray = [].slice.call(this.templateArray)

相关文章：