Vue之简易MVVM实现

总结

本篇文章主要是总结以及简易MVVM实现的推荐。

自从看Vue源码之后,写了几篇相关的文章,针对于Vue有如下的了解:

  • 响应式原理部分
  • data、computed的双向绑定以及依赖的实现
  • data与computed响应式原理过程实现的区别
  • computed是如何收集依赖的
  • computed是如何具有缓存的
  • render函数部分
  • Vue解析template得到ast的处理
  • 由ast结构构建特殊结构的render函数的处理
  • render函数调用过程VNode相关的创建
  • Vue实例创建过程中__patch__的处理

整个Vue源码的分析都是基于简单实例的基础上,涉及到相关的主要处理逻辑都有相关分析,源码分析下来,算是达到了最初的目标。实例如下:

<div id="app">
	{{ text }}
</div>

Vue实例创建时的整个流程主要点都有分析到,但是对于Vue中props、slots、slot-scope、生命周期、指令相关、事件分发等都没有具体的去梳理,本来本次Vue源码阅读的重点都不在这些点上。

通过Vue源码的阅读,才实际感受到Vue整个的处理逻辑的复杂,涉及到的方方面面都值得去好好研究学习,之后也会一直有针对性的去阅读Vue.js相关源码。

简易MVVM

在阅读Vue.js源码之后,了解了整体的大概处理逻辑之后,就自己动手实践简易的MVVM。
具体的实现效果如下:
在这里插入图片描述

具体这边的分析都写在 我的Github MVVM仓库 中了,源码中对于重要点都有详细的注释便于理解,如果你感兴趣,可以view下,相信会有所收获。

猜你喜欢

转载自blog.csdn.net/s1879046/article/details/83020655