VUE相关知识点

VUE相关知识点
vue是一个用于构建用户界面的框架，采用MVVM模式（model-view-viewmodel），model即为对应的数据，view是html，viewmodel则是vue实例对应代码见下面的代码片段。

  
    
       
         
         
          
   
   
     //View
    

       {{message}}
    
    
 

vue是以数据为驱动的，将DOM与数据进行绑定，两者将保持同步。

vue实现双向数据绑定使用 v-model="xxx_feild" ，原理是使用data bindings 和dom listeners是实现双向数据绑定的关键，dom listeners监听dom的变化，一旦变化，则对应的数据也改变；data bindings则是监听数据的变化，一旦变化，则对应的dom也发生改变。

vue的特点：

• 页面结构清晰简洁 html模板+数据+vue实例+样式
• 组件化：可维护性、可复用性+解耦
• 数据驱动 减少dom操作（使用fragment文档片段），提升性能
• 轻量级
• 文档齐全 上手简单

总结：

vue使用mvvm框架，以数据为驱动，实现了双向数据绑定。主要的有点就是：轻量级、文档简单易上手 vue全家桶、容易向后兼容 改版比较容易 减少dom操作 组件化 更方便维护 。

实现双向数据绑定的原理是：利用object.defineProperty(obj, key, options {enumable configurable get set}), 改写对象数据的set get方法，改变数据改取的默认行为。
a）dom元素值得改变 反映到 数据上 监听dom元素的onchange 等事件 获取到最新的值 进行set；
b）数据的改变反映到元素上 监听数据的set方法 在set方法中检测到newval oldval的不同 进行dom的更新等；

new VUE({el：'#id'，data: {}});
在VUE的构造函数里，进行数据的监控注册observe，即利用Object.defineProperty进行数据的监控，检测到数据变化的时候，即 进行相应的view更新；同时对入口元素进行解析，利用documentFragment进行各种指令、元素类型的判断，同时进行相关事件的绑定，如onchange、keyup的时候， 进行数据的更新 ，与数据进行绑定，解析完成 在插入到dom文档中，减少dom操作；
其中涉及到更新的模式：观察者、订阅者模式，一处改变，多处响应更新。

参考：
【这篇写的很好】
https://www.cnblogs.com/libin-1/p/6893712.html
http://www.92to.com/bangong/2016/12-14/14476078.html