vue.js动态数据绑定学习笔记动态数据绑定学习笔记
主要为大家详细介绍了vue.js动态数据绑定学习笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
对于vue.js的动态数据绑定，经过反复地看源码和博客讲解，总算能够理解它的实现了，心累~ 分享一下学习成果，同时也算
是做个记录。完整代码GitHub地址：https://github.com/hanrenguang/Dynamic-data-binding。也可以到仓库的 README 阅读
本文，容我厚脸皮地求 star，求 follow。
整体思路整体思路
不知道有没有同学和我一样，看着vue的源码却不知从何开始，真叫人头大。硬生生地看了observer, watcher, compile这几部
分的源码，只觉得一脸懵逼。最终，从这里得到启发，作者写得很好，值得一读。
关于动态数据绑定呢，需要搞定的是 Dep , Observer , Watcher , Compile 这几个类，他们之间有着各种联系，想要搞懂源
码，就得先了解他们之间的联系。下面来理一理：
Observer 所做的就是劫持监听所有属性，当有变动时通知 Dep
Watcher 向 Dep 添加订阅，同时，属性有变化时，Observer 通知 Dep，Dep 则通知 Watcher
Watcher 得到通知后，调用回调函数更新视图
Compile 则是解析所绑定元素的 DOM 结构，对所有需要绑定的属性添加 Watcher 订阅
由此可以看出，当属性发生变化时，是由Observer -> Dep -> Watcher -> update view，Compile 在最开始解析 DOM 并添加
Watcher 订阅后就功成身退了。
从程序执行的顺序来看的话，即 new Vue({}) 之后，应该是这样的：先通过 Observer 劫持所有属性，然后 Compile 解析
DOM 结构，并添加 Watcher 订阅，再之后就是属性变化 -> Observer -> Dep -> Watcher -> update view，接下来就说说具体
的实现。
从从new一个实例开始谈起一个实例开始谈起
网上的很多源码解读都是从 Observer 开始的，而我会从 new 一个MVVM实例开始，按照程序执行顺序去解释或许更容易理
解。先来看一个简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div class="test">
<p>{{user.name}}</p>
<p>{{user.age}}</p>
</div>
<script type="text/javascript" src="hue.js"></script>
<script type="text/javascript">
let vm = new Hue({
el: '.test',
data: {
user: {
name: 'Jack',
age: '18'
}
}
});
</script>
</body>
</html>
接下来都将以其为例来分析。下面来看一个简略的 MVVM 的实现，在此将其命名为 hue。为了方便起见，为 data 属性设置了
一个代理，通过 vm._data 来访问 data 的属性显得麻烦且冗余，通过代理，可以很好地解决这个问题，在注释中也有说明。
添加完属性代理后，调用了一个 observe 函数，这一步做的就是 Observer 的属性劫持了，这一步具体怎么实现，暂时先不展
开。先记住他为 data 的属性添加了 getter 和 setter。
function Hue(options) {
this.$options = options || {};
let data = this._data = this.$options.data,
self = this;
Object.keys(data).forEach(function(key) {
self._proxyData(key);
});
下载后可阅读完整内容，剩余6页未读，立即下载
weixin_38619467
- 粉丝: 5
- 资源: 957
我的内容管理
展开
最新资源
- 李兴华Java基础教程：从入门到精通
- U盘与硬盘启动安装教程：从菜鸟到专家
- C++面试宝典：动态内存管理与继承解析
- C++ STL源码深度解析：专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手：数据管理与企业增值的战略
- Eclipse IDE基础教程：从入门到精通
- Shell脚本专家宝典：全面学习与资源指南
- Tomcat安装指南：附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华：必备术语集锦
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
