VUE相关知识点

作者: shanshanfei | 来源:发表于2017-08-07 10:53 被阅读0次

Plan
vue学习(31)脚手架使用
VUE相关知识点
vue相关知识点
Vue相关知识点
vue相关知识点
vue 相关知识点
vue相关知识点
vue仿cnode社区
无标题文章

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

  <!DOCTYPE html>
    <html>
       <head>
         <title>声明式渲染</title>
         <meta charset="utf-8">
         <script src="https://unpkg.com/vue/dist/vue.js"></script> 
   </head>
   <body>
     //View
    <div id="app">
       {{message}}
    </div>
    <script>
   //Model
   var exampleData = {
     message: 'Hello Vue!'
   }
   //ViewModel
   var app = new Vue({
       el: '#app',
       data: exampleData
   })
 </script>
 </body>
</html>

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