脚本宝典收集整理的这篇文章主要介绍了vue 源码简述，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

vue实现的关键点

1. Observer类，该类是用于监控数据的变化，核心函数Object.defineProperty
2. Directive类，该类是用于DOM节点与数据进行一一对应
3. Binding类，该类是用于快速定位指令与各类数据的关系，通过对象键值对的特质避免循环搜索
4. Watcher类，该类用于在DOM中的数据发生变化，执行相应的update函数，更新DOM

实现过程

1. 保存实例参数
2. 把公共指令和用户参数做合并，公共指令中存储着不同类型节点的update函数
3. 初始化数据监听模块，即Observer类
   3.1 遍历数据对象，如果值类型为对象或数组则继续深度遍历，并且记录父节点（记录父节点是为了模拟事件冒泡）否则定义监听函数。
   3.2 监听函数通过Object.defineProperty可以监听数据的变化并且调用函数，该函数的功能是调用订阅事件并且逐级冒泡调用父级订阅事件。
4. 初始化Bingding对象，该对象保存在vue实例的属性rootBingding中，设置订阅事件
5. 挂载元素
   5.1 遍历DOM元素的每个节点。当遍历到文本节点时，创建一个新的文本节点，把应该显示的数据填上，删除旧的文本节点。如果文本节点中含有指令，创建Directive实例，保存节点和数据。
   5.2 在创建Directive类过程中创建Watcher类（该类保存上下文、更新回调函数等），并且调用公共指令中的update函数。
   5.3 Watcher类实例化过程中根据路径创建Binding对象，并把该对象放入到rootBingding中，格式与用户传入进来的data格式一致，在该Binding对象中存放watcher实例。这样当指令更新时，利用Binding的对象特性可以快速定位到相应的watcher类，调用watcher类中的更新函数，实现DOM节点的部分更新。

代码

https://github.com/youngwind/...

脚本宝典总结

以上是脚本宝典为你收集整理的vue 源码简述全部内容，希望文章能够帮你解决vue 源码简述所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。