<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>element-ui</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-button @click="copy">拷贝</el-button>
<el-button @click="copyDeep">深拷贝</el-button>
<el-button @click="modify">修改原数据</el-button>
<p>原对象: <span>{{newObj}}</span></p>
<p>浅拷贝:<span>{{myObj1}}</span></p>
<p>深拷贝:<span>{{myObj2}}</span></p>
</div>
<script>
new Vue({
el: "#app",
data: {
newObj: {
name: "Frank",
age: 18,
nation: "china",
sex: "male"
},
myObj1: {
name: '我是对象1'
},
myObj2: {
name: '我是对象2'
}
},
methods: {
//深拷贝方法
copyData(target) {
//先判断类型,再拷贝
function checkType(val) {
return Object.prototype.toString.call(val).slice(8, -1);
}
let res, type = checkType(target);
if (type === 'Object') {
res = {};
} else if (type === 'Array') {
res = [];
} else {
return target;
}
for (let i in target) { //数组和对象 for in 循环
let value = target[i];
if (checkType(value) === 'Object' || checkType(value) === 'Array') { //嵌套
res[i] = this.copyData(value);
} else { //基本数据或者函数
res[i] = value;
}
}
return res;
},
//拷贝
copy() {
this.myObj1 = this.newObj;
},
//深拷贝
copyDeep() {
this.myObj2 = this.copyData(this.newObj);
},
//修改原数据
modify() {
this.newObj.name = '弗兰克';
this.newObj.age++;
}
}
})
</script>
</body>
</html>