17_深度拷贝

<!--浅拷贝就是拷贝一些原始的数据类型，可以直接将数据拷贝过来，但是要是引用类型的话，用浅拷贝的方法就不够用了-->
<div id="app">
    <form @submit.prevent="insert">
        <input type="text" v-model="student.name">
        <input type="text" v-model="student.age">
        <input type="text" v-model="student.girlfriend.name">
        <button>添加</button>
    </form>
    <ul>
        <li v-for="item in list">
            姓名：{{ item.name }}
            年龄：{{ item.age }}
            女朋友：{{ item.girlfriend.name }}
        </li>
    </ul>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            student: {
                name: "",
                age: "",
                girlfriend: {
                    name: ""
                }
            },
            list: []
        },
        methods: {
            insert() {
                this.list.push(
                    this.copy(this.student)
                )
            },
            copy(obj) {
                let newObj = {};
                for (let i in obj) {
                    if (obj[i] instanceof Object) {
                        //这里如果拷贝的是引用类型的话
                        //使用递归解决
                        newObj[i] = this.copy(obj[i])
                    } else {
                        //下面这个是浅拷贝
                        newObj[i] = obj[i];
                    }
                }
                return newObj
            }
        }
    })
</script>