vue源码解析
来源:互联网 发布:php mysql实例源码 编辑:程序博客网 时间:2024/05/06 03:57
首先在阅读源码的时候得搞清楚整个框架的基础结构,然后再根据框架的核心思想和亮点来一个一个剖析内部实现,最后再回过头来一个个整理实现思路,了解框架的设计精华所在。
首先程序结构梳理
引用自勾三股四
框架内容大概分为两个部分
- 全局:包括全局接口、默认选项等。
- vm实例:实例api和初始化过程设计。
整个实例初始化的过程中,重中之重就是把数据 (Model) 和视图 (View) 建立起关联关系。Vue.js 和诸多 MVVM 的思路是类似的,主要做了三件事:
- 通过 observer 对 data 进行了监听,并且提供订阅某个数据项的变化的能力
- 把 template 解析成一段 document fragment,然后解析其中的 directive,得到每一个 directive 所依赖的数据项及其更新方法。比如 v-text=”message” 被解析之后 (这里仅作示意,实际程序逻辑会更严谨而复杂):
- 所依赖的数据项 this.$data.message,以及
- 相应的视图更新方法 node.textContent = this.$data.message
- 通过 watcher 把上述两部分结合起来,即把 directive 中的数据依赖订阅在对应数据的 observer 上,这样当数据变化的时候,就会触发 observer,进而触发相关依赖对应的视图更新方法,最后达到模板原本的关联效果。
所以整个 vm 的核心,就是如何实现 observer, directive (parser), watcher 这三样东西
最新的目录说明再此
0 0
- vue源码解析
- Vue源码解析(一)
- Vue源码解析(二)
- Vue源码解析(三)
- Vue源码解析(四)
- Vue源码解析(五)
- 自己实现MVVM(Vue源码解析)
- vue muit-ui infinite-scroll源码解析
- Vue-lazyload原理详解之源码解析
- vue源码解析之--数据双向绑定
- vue源码解析之插件入侵机制
- 前端框架--自己实现MVVM(Vue源码解析)
- vue如何实现observer和watcher源码解析
- vue mint-ui源码解析之loadmore组件
- Vue.js解析(三)【从Vue.js源码角度再看数据绑定】
- Vue.js源码解析(七)【聊聊Vue.js的template编译】
- Vue.js源码解析(八)【Vue.js异步更新DOM策略及nextTick】
- Vue.js源码解析(九)【从template到DOM(Vue.js源码角度看内部运行机制)】
- String类的深拷贝
- 一条语句系列——sql(不定期更新)
- springmvc+spring+mybatis框架搭建
- Run loop observer的使用(含demo)
- 数据库-面试题
- vue源码解析
- 909422229__html5学习【未完】
- 代码合集(2)——容器算法之对序列进行只读操作(查找、搜索等)
- a java runtime environment
- FFMPEG对HLS切片的支持
- 空类型所占内存大小
- CentOS下给vim安装emmet插件
- 代码笔记 | 网站微信登录
- MySQL修改字符集为utf8mb4以支持 emoji 表情符号