浅析vue深复制

什么是深复制

在编程中，复制一个对象并不是简单地复制原先的地址，而是将原对象的所有数据都复制到一个新的内存地址中，我们称之为复制对象。当我们在拷贝一个对象的时候，有可能会遇到"浅复制"和"深复制"。

• 浅复制：复制对象时，指向某个指针的指针只能复制指针的值，而不能复制所指向的对象。因此，当我们改变所指向对象的内容时，指针也会发生相应的变化。
• 深复制：复制对象时，它会复制指针所指向的所有内容，因此新对象就会有一个新的地址，所以改变新对象不会改变原有对象的值。

Vue中的v-model等操作时，所有的变量和方法均被绑定到了一个Vue实例上，如果我们想要直接将这个对象进行拷贝，那么会发现拷贝后的对象和原来的对象是相互影响的，因为它们在内存中是指向同一个地址的，这个问题就需要用到深复制。

如何实现深复制

Vue提供了一个方法Vue.set，可以实现深复制。

• Vue.set(target, key, value)：这个方法用于向Vue实例直接添加新的响应式属性，可以实现对Vue数据的深复制。
• 可以采用JSON.parse(JSON.stringify(object))方式实现深复制，但是这种方法的局限性比较大，只能复制字符串、数字、布尔、数组和对象等左右基本类型的数据，但是对于函数和正则表达式等对象则不能处理。

示例说明

示例1

HTML代码

<div id="app">
    <input v-model="name">
    <p>{{ profile }}</p>
    <button @click="resetProfile">重置Profile</button>
</div>

JS代码

const app = new Vue({
    el: '#app',
    data: {
        name: '',
        profile: {
            age: 18,
            sex: '男'
        }
    },
    methods: {
        resetProfile() {
            const defaultProfile = {
                age: 18,
                sex: '男'
            };
            // 实现深复制
            this.profile = JSON.parse(JSON.stringify(defaultProfile));
        }
    }
});

通过该示例，我们可以看出，在点击重置按钮后，对Profile对象进行了深复制，不会再对原对象产生影响。

示例2

HTML代码

<div id="app">
    <ul>
        <li v-for="item in list">{{ item }}</li>
    </ul>
    <button @click="resetList">重置List</button>
</div>

JS代码

const app = new Vue({
    el: '#app',
    data: {
        list: ['Vue', 'React', 'Angular']
    },
    methods: {
        resetList() {
            const defaultList = ['Vue', 'React', 'Angular'];
            // 实现深复制
            this.list= JSON.parse(JSON.stringify(defaultList));
        }
    }
});

该示例中，我们通过深复制实现了数组的复制，使得在进行过后的操作后，不会对原数组产生影响。