拷贝-CSDN博客

本文链接：https://blog.csdn.net/weixin_46040936/article/details/103611681

面试题@TOC

一.深拷贝的方法有哪些？

1.JSON方法

var obj2 =JSON.parse（JSON.stringify(obj1)）//深拷贝

2.递归

	(自己调用自己)方法 判断第一层属性的类型，多层拷贝对象的属性

var obj1 = {
			name: 'zs',
			age: 18,
			dog: {
			name: '金毛',
			age: 2
			},
			friends: ['ww', 'lil']
			}
			var obj2 = {};
			function deepCopy(o1, o2) {
			for (var k in o1) {
			//如果第一层中的属性是数组复杂类型
			if (o1[k] instanceof Array) {
			o2[k] =[];//如果o1[k]是数组，那就给o2[k]也准备一个数组存放拷贝过来的内容
			deepCopy(o1[k], o2[k]);
			}
			//如果第一层中的属性是object复杂类型
			else if (o1[k] instanceof Object) {
			o2[k]={};
			deepCopy(o1[k], o2[k]);
			} else {
			o2[k] = o1[k];
			}
			}
			}
			deepCopy(obj1, obj2);
			obj1.name = 'lisi';
			obj1.dog.name = '大黄';
			console.log(obj1);
			console.log(obj2);

3.Object.created();

			// Object.create()具体使用方法**加粗样式**

var obj = {name:'lisi'};
			var newObj = Object.create(obj);
			//newObj的原型(proto)指向obj,具备了obj的属性和方法

二.v-show 和 v-if 的区别

1.v-show:

<body>
<div id="app">
    <div v-show="isShow">{{name}}</div>
    <button @click="handleClick">切换</button>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            isShow:true,
            name:"Sansa Stark"
        },
        methods:{
            handleClick () {
                this.isShow = !this.isShow
            }
        }
        
    })
</script> 
</body>

2.v-if:

<div id="app">
       <div v-if="isShow">{{name}}</div>
       <button @click="handleClick">切换</button>
</div>

总结：

v-show小结：

1、v-show仅仅控制元素的显示方式，通过display属性的none
2、当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销

v-if小结：

1、v-if会控制这个DOM节点的存在与否。
2、如果在运行时条件很少改变，则使用 v-if 较好。**