Javascript 对象的深层副本在 Vue.js 中无法按预期工作答案

【问题标题】：Deep copy of a Javascript object is not working as expected in Vue.jsJavascript 对象的深层副本在 Vue.js 中无法按预期工作
【发布时间】：2019-10-11 02:49:51
【问题描述】：

我正在使用props 将对象的克隆从父组件传递到子组件，但是当我更改父组件对象中status 属性的值时，子组件会收到通知并更改“克隆”对象中status 属性的值。

我读过Object.assign() 方法，它只进行浅拷贝，但奇怪的是我的对象属性是原始类型 String 意味着它们应该按值而不是按引用来复制，我什至尝试手动分配值并尝试如下所示的 JSON 方式，但没有任何效果。

父组件：AppServers

<template>
  <div>
    <AppServerStatus v-for="server in servers"   :serverObj="JSON.parse(JSON.stringify(server))">
    </AppServerStatus>
    <hr>
    <button @click="changeStatus()">Change server 2</button>
  </div>
</template>

<script>
  import AppServerStatus from './AppServerStatus';

  export default {
    name: "AppServers",
    components: {
      AppServerStatus
    },
    data() {
      return {
        servers: [
          {
            name: 'server1',
            status: 'Critical'
          },
          {
            name: 'server2',
            status: 'Normal'
          },
          {
            name: 'server3',
            status: 'abnormal'
          },
          {
            name: 'server4',
            status: 'idle'
          },
          {
            name: 'server5',
            status: 'Good'
          },
        ],
        serverTmp: {}
      }
    },
    methods: {
      changeStatus(){
        this.servers[1].status = 'Active';
      }
    }
  }
</script>

子组件：AppServerStatus

<template>
  <div>
    <h3>Server Name: {{ serverObj.name }}</h3>
    <p>Server Status: {{ serverObj.status }}</p>
    <hr>
  </div>
</template>

<script>
  export default {
    name: "AppServerStatus",
    data() {
      return {
        status: 'Critical'
      }
    },
    props: [
      'serverObj'
    ]
  }
</script>

当我在父组件中执行changeStatus() 时，我希望子组件对象中status 属性的值保持正常，但它也会发生变化。

【问题讨论】：

当您更改父对象中的状态时，子对象会收到一个新副本，因为给定值的依赖关系已更新。

标签： javascript vue.js deep-copy

【解决方案1】：

从created 或mounted 上的serverObj 属性创建一个新对象，以防止不必要的反应。

<template>
  <div>
    <h3>Server Name: {{ server.name }}</h3>
    <p>Server Status: {{ server.status }}</p>
    <hr>
  </div>
</template>

<script>
  export default {
    name: 'AppServerStatus',
    data() {
      return {
        status: 'Critical',
        server: {
          name: '',
          status: ''
        }
      }
    },

    props: [
      'serverObj'
    ],

    mounted() {
       this.server = {
         name: this.serverObj.name,
         status: this.serverObj.status
       };
    }
  }
</script>

【讨论】：