万字血书Vue—Vue的核心概念

MVVM

M：模型（Model）：data V：视图（View）：模板 VM：视图模型（ViewModel）：Vue实例对象

Vue收到了MVVM模型的启发

    
    
    
，MVVM是vue实现数据驱动视图和双向数据绑定的核心原理     


     


     


 ，通过ViewModel监听DOM和数据源的变化    
    
    
 。

Object.defineProperty

let number = 15 let person = { name: zs, gender: male, age: 20 } //此种方式添加的属性 




 




 




 ，不可被枚举（遍历） Object.defineProperty(person, age, { value: 18, enumerable: true,//控制是否可枚举（遍历） writable: true,//控制是否可修改 configurable: false,//控制是否可删除 //读取person的age属性时

   

   

   

，get函数就会被调用     

     

     

，返回值是age的值 get() { return number }, //修改person的age属性时  




  




  




  ，set函数就会被调用


  


  


  

，返回值是value的值 set(value) { number = value } })

数据代理

通过一个对象代理对另一个对象的操作（读/写）     
     
     
，更加方便操作data中的数据 


     


     


     。

基本原理：

通过Object.defineProperty（）把data对象所有属性添加到vm上

 




 




 




。 为每一个添加到vm上的属性   




   




   




  ，都指定一个getter和setter   

   

   

。 在getter和setter内部去操作data中对应的属性  

     

     

     。

Vue监测数据改变的原理

Vue会监视data中所有层次的数据


  




  




  



。

“响应式
    
    
    
”



 



 



 

，这个词你可以已经听过很多遍               ，简单来说响应式就是：数据发生变化    




    




    




  ，UI页面做出响应
















，但Vue是怎么发现数据被修改了？

Vue如何检测对象属性的改变？

将data代理到vm实例               ，在vm上通过Object.defineProperty（）添加getter和setter     



     



     



  ，通过setter实现监视















，且要在new Vue时就传入要监测的数据  


  


  


。

对象中后添加的数据
    
    
    
，Vue默认不做响应式处理； 如需给后添加的属性做响应式     


     


     


 ，可以使用： Vue.set(target,propertyName/index,value) vm.$set(target,propertyName/index,value) //vue.set不能直接给data加数据（对象不能是vue实例或Vue实例的根数据对象）,只能给其中的对象添加

Vue如何检测数组的改变？

Vue通过包装数组身上常用的方法来实现（pop    
    
    
 、push 


     


     


     、shift

 




 




 




、unshift   

   

   

、sort  

     

     

     、sploce


  




  




  



、reverse） 




 




 




 ，当调用以上被包裹的方法时

   

   

   

，会触被Vue检测到     

     

     

，也可以使用Vue.set或vm.$set   
     
     
    。

第一步：正常调用原生Array.prototype上的方法；

第二步：重新解析模板  


  


  


、生成虚拟DOM...进而更新页面；

当使用（filter   
     
     
    、concat



   




   




   


、slice）  




  




  




  ，可以用新数组替换旧数组



   




   




   


。