从vue说起
vue相信大家都很熟悉,如何使用,本人就不在这里演示了,相信这个都比我熟,今天我们来说说vue的mvvm原理,比较代码简单实现。下面简单了解一下 Vue.js 关于双向绑定的一些实现细节:
Observer 数据监听器,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者,内部采用Object.defineProperty的getter和setter来实现。
Compile 指令解析器,它的作用对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数。
Watcher 订阅者, 作为连接 Observer 和 Compile 的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数。
Dep 消息订阅器,内部维护了一个数组,用来收集订阅者(Watcher),数据变动触发notify 函数,再调用订阅者的 update 方法。
从图中可以看出,当执行 new Vue() 时,Vue 就进入了初始化阶段,一方面Vue 会遍历 data 选项中的属性,并用 Object.defineProperty 将它们转为 getter/setter,实现数据变化监听功能;另一方面,Vue 的指令编译器Compile 对元素节点的指令进行扫描和解析,初始化视图,并订阅Watcher 来更新视图, 此时Wather 会将自己添加到消息订阅器中(Dep),初始化完毕。
当数据发生变化时,Observer 中的 setter 方法被触发,setter 会立即调用Dep.notify(),Dep 开始遍历所有的订阅者,并调用订阅者的 update 方法,订阅者收到通知后对视图进行相应的更新。我们需要实现的也是上面的大概功能,来来来,废话不说,马上开路
defineproperty 是 啥 ?!
相信大家都指现在无论是React还是Vue还是最新的Angular,其实实现方式都更相近了
那就是通过数据劫持+发布订阅模式
真正实现其实靠的也是ES5中提供的Object.defineProperty,当然这是不兼容的所以Vue等只支持IE8+
下面我们简单说说它的使用:
defineproperty 是 啥 ?!
还你mvvm原理简单实现
数据劫持
为什么要这样做呢,目的就是观察对象,给对象增加Object.defineProperty
vue特点是不能新增不存在的属性 不存在的属性没有get和set
数据代理
其实就是更加美观直接、优雅,好处多多哦
数据编译
把拿到的{{}}里面的代码编译出来解析
发布订阅
数据更新视图
双向数据绑定(面试常问哦~)
大纲已出,明天细敲!!