vue双向数据绑定知识点总结
1.原理vue的双向数据绑定的原理相信大家都十分了解；主要是通过ES5的Object对象的defineProperty属性；重写data的set和get函数来实现的 所以接下来不使用ES6进行实际的代码开发；过程中如果函数使用父级this的情况；还是使用显示缓存中间变量和闭包来处理；原因是箭头函数没有独立的执行上下文this；所以箭头函数内部出现this对象会直接访问父级；所以也能看出箭头函数是无法完全替代function的使用场景的；比如我们需要独立的this或者argument的时候 1.2 defineProperty是什么语法： Object.defineProperty(obj,prop,descriptor) 参数： obj：必要的目标对象 prop：必要的需要定义或者修改的属性名 descriptor：必要的目标属性全部拥有的属性 返回值： 返回传入的第一个函数；即第一个参数obj 该方法允许精确的添加或者修改对象的属性；通过赋值来添加的普通属性会创建在属性枚举期间显示（fon...in；object.key）；这些添加的值可以被改变也可以删除；也可以给这个属性设置一些特性；比如是否只读不可写；目前提供两种形式：数据描述（set；get；value;writable;enumerable;confingurable）和存取器描述（set；get） 数据描述当修改或者定义对象的某个属性的时候；给这个属性添加一些特性 综上：对于我们有影响主要是configurable控制是否可以删除；writable控制是否可以修改赋值；enumerable是否可以枚举
所以说一旦使用Object.defineProperty()给对象添加属性；那么如果不设置属性的特性；则默认值都为false 总结特性：
存取器描述gettet&& setter当设置获取对象的某个属性的时候；可以提供getter和setter方法 get和set不是必须成对出现对；任写一个就行；如果不设置set和get方法；则为undefined 哈哈；前戏终于铺垫完成了 补充：如果使用vue开发项目；尝试去打印data对象的时候；会发现data内的每一个属性都有get和set属性方法；这里说明一下vue和angular的双向数据绑定不同 angular是用脏数据检测；Model发生改变的时候；会检测所有视图是否绑定了相关的数据；再更新视图 vue是使用的发布订阅模式；点对点的绑定数据
2.实现页面很简单；包含：
我们最后也会类似vue对方式来实现双向数据绑定 2.1 定义首先我们需要定义一个xhVue的构造函数 }
2.2 添加为了初始化这个构造函数；给其添加一个_init属性 2.3 改造升级改造_init函数；并且实现_xhob函数；对data进行处理；重写set和get函数 2.4 xhWatcher指令类watcher；用来绑定更新函数；实现对DOM更新 2.5 完善_init和_xhob继续完善_init和_xhob函数 this._binding = {}; // _binding
this._xhob(this.$data); } // 通过init出来的_binding xhVue.prototype._xhob = function(obj){ // obj = {number:0} var value; for(key in obj){ if(obj.hasOwnProperty(ket)){ this._binding[key] = { // _binding = {number:_directives:[]} _directives = [] } value = obj[key]; if(typeof value === 'object'){ this._xhob(value); } var binding = this._binding[key]; Object.defineProperty(this.$data,set:function(newVal){ if(value !== newVal){ value = newVal; // 当number改变时；触发_binding[number]._directives中已绑定的xhWatcher更新 binding._directives.forEach(function(item){ item.update(); }); } } }) } } } 2.6 解析指令怎么才能将view与model绑定；我们定义一个_xhcomplie函数来解析我们的指令（v-bind；v-model；v-clickde）并这这个过程中对view和model进行绑定 并且将解析函数也加到_init函数中 this._binding = {}; // _binding
this._xhob(this.$data); this._xhcompile(this.$el); } 最后
Document
|
