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

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

<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/ https://jsfiddle.net/4po1cpkp/7/

有没有办法根据数组模板创建新数组而不直接将其绑定到模板？

正如 Vue.js 文档所述：

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

您可以存储以下划线符号开头的名称的模板数组：

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

或者如果您需要它作为 Vue.js 对象：

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

对于大数据来说，第二种情况可能会很慢。