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
网友评论