javascript - 是否可以克隆 Vuejs 属性？

Question

我有一个 Vuejs 组件，它可以编辑其值对象的各种属性，并在情况发生变化时使用新对象发出输入事件。我不想修改值对象本身，因此我将属性复制到数据中，并且在值监视中具有基本相同的代码，以便在值更改时更新它们。

如果可以在设置时克隆该值，那就简单多了。有什么办法可以做到这一点吗？我知道我可以在“调用”组件中执行此操作，但它不应该这样做。

示例:

<template>
  <div>
    <v-checkbox label="Indoor" v-model="value.indoor" @change="onChange"/>
    <v-checkbox label="Outdoor" v-model="value.outdoor" @change="onChange"/>
  </div>
</template>

<script>
  export default {
    name: 'OptionsInput',

    props: {
      value: Object, // has indoor, outdoor properties
    },

    methods: {
      onChange() { this.$emit('input', this.value) }
    }
  }
</script>

我不想直接修改值。

Answer 1

通过计算属性制作副本是有效的。如果该值发生变化，则会创建一个新副本。比将所有内容复制到数据中并必须观察更改的值要容易得多。

<template>
    <div>
        <label><input type="checkbox" v-model="copy.indoor" @change="onChange"/> Indoor</label>
        <label><input type="checkbox" v-model="copy.outdoor" @change="onChange"/> Outdoor</label>
    </div>
</template>

<script>
    export default {
        name: 'OptionsInput',

        props: {
            value: Object, // has indoor, outdoor properties
        },

        computed: {
            copy() { return  {...this.value} }
        },

        methods: {
            onChange() { this.$emit('input', this.copy) }
        }
    }
</script>