vue数据双向绑定原理和简单的实现
1）vue数据双向绑定原理-observer
2）vue数据双向绑定原理-wather
3）vue数据双向绑定原理-解析器 complie
vue数据双向绑定原理, 和简单的实现
去他喵的底层原理，框架内核，老夫写代码只用jquery 。
个人觉得，不论是否是长期与之交集，还是应该看下核心的东西。多多了解高人是如何实现的，这样才能学到更多的知识，才能成长进步。倘若某天被人问起，某种框架内裤，其实现原理，那么只能是一脸懵逼了。
实现数据绑定的做法有大致如下几种：
发布者-订阅者模式（backbone.js）
脏值检查（angular.js）
数据劫持（vue.js）
vue.js则是采用数据劫持结合发布者-订阅者模式的方式，通过object.defineproperty()来劫持各个属性的setter,getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
假如写过c#winform自定义控件的，我想更好理解之后的逻辑和实现原理
在c#中当控件的某个属性发生了变化，就刷新视图
priveate int a ;public int a{ get { return a; } set { if(a!=value){a = value; invalidate(); } }}# 当a的值发生变化, 就重绘视图
再来看看object.defineproperty(obj, prop, descriptor) 方法
地址：https://developer.mozilla.org/zh-cn/docs/web/javascript/reference/global_objects/object/defineproperty
object.defineproperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。
obj需要被操作的目标对象
prop目标对象需要定义或修改的属性的名称。
descriptor将被定义或修改的属性的描述符
descriptorconfigurable当且仅当该属性的configurable为true时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为false。
enumerable当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为false。数据描述符同时具有以下可选键值：
value该属性对应的值。可以是任何有效的javascript值（数值，对象，函数等）。默认为undefined。
writable当且仅当该属性的writable为true时，该属性才能被赋值运算符改变。默认为false。 存取描述符同时具有以下可选键值：
get一个给属性提供getter的方法，如果没有getter则为undefined。该方法返回值被用作属性值。默认为undefined。
set一个给属性提供setter的方法，如果没有setter则为undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为undefined。
先来实现一个简单数据劫持
var a = {};var a = "";object.defineproperty(a, "a", { set: function (value) { a = value; }, get: function () { return "my name is " + a; },});a.a = "chuchur";console.log(a.a); // my name is chuchur
不光是这么简单，来看下vue的代码
<div id="app"> <input type="text" v-model="word" /> <p>{{word}}</p> <button v-on:click="sayhi">change model</button></div><script> var vm = new vue({ el: "#app", data: { word: "hello world!", }, methods: { sayhi: function () { this.word = "hi, everybody!"; }, }, });</script>
已经实现的简单的数据劫持，那么有多个属性，就要实现一个数据监听器observer，能够对数据对象的所有属性进行监听，还需要一个订阅器dep来收集这些属性的变动来通知订阅者
元素节点的v-model,v-on:click，就需要实现一个指令解析器compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
最后实现一个订阅者watcher，作为连接observer和compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
大概的流程图如下:
实现observer将需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
// observefunction observe(data) { if (data && typeof data === "object") { // 取出所有属性遍历 object.keys(data).foreach(function (key) { definereactive(data, key, data[key]); }); } return;}function definereactive(data, key, val) { observe(val); // 监听子属性 object.defineproperty(data, key, { enumerable: true, // 可枚举 configurable: false, // 不能再define get: function () { return val; }, set: function (value) { console.log("监听到值变化了: ", val, "==>", value); val = value; }, });}var a = { fristname: "chuchur", age: 29,};observe(a);a.fristname = "nana"; //监听到值变化了: chuchur ==> nanaa.age = 30; //监听到值变化了: 29 ==> 30
这样就实现了多个属性的监听，接下来就是实现订阅器dep，当这些属性变化的时候，触发通知notify，告诉执行订阅者执行更新函数
//depfunction dep() { this.subs = [];}dep.prototype = { addsub: function (sub) { this.subs.push(sub); }, notify: function () { this.subs.foreach(function (sub) { sub.update(); }); },};
把订阅器植入到监听器里
function definereactive(data, key, val) { var dep = new dep() observe(val); //监听子属性 object.defineproperty(data, key, { set: function(value) { dep.notify() //发出通知, 我被改变了 } });}
至此，简陋的监听器就实现完成了，接下来继续完成watcher。
推荐学习：vue.js教程
以上就是解析vue中observer数据双向绑定原理（代码分享）的详细内容。