关于vue的几点面试题(vue双向数据绑定和深拷贝浅拷贝之间的区别)

1.vue的双向数据绑定：

实现mvvm的双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
vue的双向数据绑定整合了整合Observer，Compile和Watcher三者，通过Observer监听数据的变化，通过Compile来编辑解析指令，通过Watcher搭起Observer和Compile的通信桥梁。

2.深拷贝和浅拷贝

浅拷贝：
例如：

let  a=[0,1,2,3,4],
        b=a; 
        console.log(a===b);（true）
         a[0]=1; 
         console.log(a,b);（打印的值一样）

详解：

因为基本数据类型number，string，boolean，null，undefined，symbol
赋值是存储在栈内存中，当你b=a复制时，栈内存会新开辟一个内存，所以当你此时修改a=2，对b并不会造成影响。这就是深拷贝。
引用数据类型–名存在栈内存中，值存在于堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值，当b=a进行拷贝时，其实复制的是a的引用地址，而并非堆里面的值，而当我们a[0]=1时进行数组修改时，由于a与b指向的是同一个地址，所以两个数组打印出来的值是一样的，这就是浅拷贝。

这并不是说引用数据类型只能进行浅拷贝。接下来就讲解一下怎样使用深拷贝。这是网上比较流行的一种深拷贝方法，首先进行判断传入的值是否为数组活着对象，然后进行循环遍历判断obj的子元素是否为对象，如果是对象，就进行递归赋值，如果不是，就简单赋值

function deepClone(obj){
     let objClone = Array.isArray(obj)?[]:{};
     if(obj && typeof obj==="object"){
         for(key in obj){
             if(obj.hasOwnProperty(key)){
                 //用for...in循环会获取到原型链上的可枚举属性，不过可以使用hasOwnProperty()方法过滤掉。
                 if(obj[key]&&typeof obj[key] ==="object"){
                  //判断ojb子元素是否存在并且是否为为对象，如果是，递归复制
                     objClone[key] = deepClone(obj[key]);
                 }else{
                     //如果不是，简单复制
                     objClone[key] = obj[key];
                 }
             }
         }
     }
     return objClone;
     }

还有一种比较简单的方法可以进行深拷贝

利用JSON对象（转化数据格式）的两种方法
function deepClone(obj){
let _obj = JSON.stringify(obj),//把JSON对象转化为字符串
objClone = JSON.parse(_obj);//把JSON字符串转化为对象
return objClone
}
b=deepClone(a);（改变a里面的属性，b不会受影响）

关于vue的几点面试题(vue双向数据绑定和深拷贝浅拷贝之间的区别)

猜你喜欢