vue对象的深度克隆方式

当我们需要将Vue.js中的对象进行克隆时，通常会使用深度克隆方式，以保证克隆后的对象与原对象完全独立。

Vue.js中的对象克隆可以通过JSON.parse()与JSON.stringify()方法实现。具体实现步骤如下：

1.使用JSON.stringify()将原对象转化为JSON字符串。

2.使用JSON.parse()将JSON字符串转化为新对象。

这种方式的特点是比较简洁、易懂，同时也是Vue.js官方推荐的方式之一。下面是两个克隆示例：

示例1：使用JSON.parse()与JSON.stringify()实现Vue对象深度克隆

// 原对象
var obj = {
  name: 'Vue.js',
  author: {
    name: '尤雨溪',
    email: '[e-mail]'
  }
};

// 克隆对象
var cloneObj = JSON.parse(JSON.stringify(obj));

// 修改克隆对象的值
cloneObj.name = 'React.js';
cloneObj.author.email = '[e-mail]';

// 输出原对象和克隆对象
console.log(obj); // { name: 'Vue.js', author: { name: '尤雨溪', email: '[e-mail]' }}
console.log(cloneObj); // { name: 'React.js', author: { name: '尤雨溪', email: '[e-mail]'}}

示例2：将克隆对象赋值给Vue组件中的数据和计算属性

<template>
  <div>
    <p>原数据：{{obj}}</p>
    <p>克隆数据：{{cloneObj}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        name: 'Vue.js',
        author: {
          name: '尤雨溪',
          email: '[e-mail]'
        }
      },
      cloneObj: {}
    }
  },
  created() {
    // 将克隆对象赋值给数据和计算属性
    this.cloneObj = JSON.parse(JSON.stringify(this.obj));
    this.cloneAuthor = JSON.parse(JSON.stringify(this.obj.author));
  }
}
</script>

以上两个示例展示了如何在Vue.js中使用JSON.parse()与JSON.stringify()方法实现对象深度克隆。它们可以满足大部分的扩展需求，但对于某些特殊形态的对象，还需要我们根据实际场景进行优化。