vue响应式原理简述（对vue响应式的理解）

1    
    
    
、所谓数据响应式就是能够使数据变化可以被检测并对这种变化做出响应的机制    
    
    
。

2     


     


     


、MVVM框架要解决的一个核心问题是连接数据层和视图层    
    
    
，通过数据驱动应用     


     


     


，数据变化




 




 




 ，视图更新
   

   

   
，要做到这点的就需要对数据做响应式处理     

     

     

，这样一旦数据发生变化就可以立即做出更新处理


     


     


     。

3




 




 




 、以vue为例说明 




  




  




 ，通过数据响应式加上虚拟DOM和patch算法

  


  


  
，开发人员只需要操作数据     
     
     
，关心业务  




   




   




 ，完全不用接触繁琐的DOM操作


 



 



 
，从而大大的提升了开发效率               ，降低开发难度
 




 




 



。

4
   

   

   
、vue2中的数据响应式会根据数据类型来做不同处理   




    




    




 ，如果是对象则采用Object.defineProperty()的方式定义数据拦截














，当数据被访问或发生变化时               ，我们感知并做出响应；如果是数组则通过覆盖数组对象原型的7个变更方法    



     



     



 ，使这些方法可以额外的做更新通知














，从而做出响应   

   

   

。这种机制很好的解决了数据响应式的问题    
    
    
，但在实际使用中也有一些缺点；比如初始化时递归遍历也会造成性能损失；新增或删除属性时     


     


     


，需要用户使用Vue.set/delete这样特殊的api才能生效；对于ES6中新产生的Map     

     

     

、Set这些数据结构不支持等问题 

     

     

    。

5 




  




  




 、为了解决这一问题




 




 




 ，vue3重新编写了这一部分实现；利用ES6的Proxy代理要响应化的数据
   

   

   
，它有很多好处     

     

     

，变成体验也是一致的 




  




  




 ，不需要是使用特殊API,初始化性能和内存消耗得到了大幅改善；另外由于响应化的实现代码抽取为独立的reactive包

  


  


  
，使得我们可以更灵活的使用它     
     
     
，第三方的扩展开发起来更加灵活了