欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-19 15:36:44
...

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;
         }
    

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

     function deepClone(obj){
         let _obj = JSON.stringify(obj),
             objClone = JSON.parse(_obj);
         return objClone
     }    
       b=deepClone(a);(改变a里面的属性,b不会受影响)