脚本宝典收集整理的这篇文章主要介绍了模仿Vue写一个mvvm,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
网络上有很多教你如何模仿vue手写mvvm的视频,我从来没有自己动手写过。这周末想着一定要把这件事情完成。
下面就关于vue如何实现two-way data-binding做一个简单的步骤梳理,文字有点多,不过逐步看下去或许会对大家有所启发哦,同时我也会把需要用到的知识点罗列出来~
所谓双向绑定,即数据变化 -> 视图更新;视图交互变化(如input) -> 数据model变更的效果。
何为mvvm?简言之,把数据和视图进行关联的一种模式。这四个字母可以这么理解: Model, View, ViewModel。
模仿vue来写一个自己的mvvm,往简单来讲,一般涉及下面三个步骤:
模板编译 Compile
数据劫持 Observe
所谓数据劫持就是当数据(一定是对象,引用类型的值)发生改变的时候,添加我们自己的逻辑。一般情况下,我们给对象赋值都是直接let obj = value,完毕。在这个过程中我们无法添加自己的逻辑,比如你希望当对象的值发生改变时(即监听对象的变化,当发生改变时调用方法),例如给一个console输出或做点别的,却无法做到。
那么如何添加自己的逻辑呢?答案就是ES5的Object.defineProperty方法。在调用Object.defineProperty方法时,如果不指定,configurable,enumerable和wrITable特性的默认值都是false,所以务必要把configurable和enumerable的值设置成true。最关键的是,给对像的某个key写上get和set方法,这样一来你就可以在取值和赋值的过程中添加自己的逻辑了。
监听(数据)变化 Watcher
这是难点,也是关键点。
在Observe观察到对象数据发生变化了,但是无法改变视图(view)。所以,watcher的作用,就是给各个绑定数据的地方,一一对应的进行监听。在Observe发现数据变化后,调用watcher函数对相应的视图进行数据更新。
未完待续~
ps.个人认为单个功能的代码不超过30行比较好。如果超过了,可以拆分成多个细小的代码块,方便阅读,也方便梳理逻辑。
以上是脚本宝典为你收集整理的模仿Vue写一个mvvm全部内容,希望文章能够帮你解决模仿Vue写一个mvvm所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。