vue.js动态数据绑定详解与实现过程

167 浏览量更新于2024-09-01 收藏 102KB PDF 举报

Vue.js动态数据绑定学习笔记深入解析 Vue.js 的动态数据绑定是其核心特性之一，它允许数据与视图实时同步，提高了开发效率和用户体验。本篇笔记旨在帮助读者理解这一机制的实现原理，包括Dep、Observer、Watcher和Compile四个关键组件的协作。首先，Dep（依赖检测器）是核心，它负责在整个应用中跟踪数据的变化。每当属性发生变化，Dep会检测到这个变化并通知相关的Watcher。Observer则负责实际的属性监听，它会在属性被赋值或修改时，将变化通知给Dep。 Watcher是响应式系统中的回调函数，它接收Dep的通知后，执行相应的更新逻辑。这可能涉及到更新局部视图，或者触发更深层次的视图更新。Watcher在编译阶段就已经注册，由Compile（编译器）负责添加到特定的DOM元素上。 Compile过程至关重要，它分析HTML模板，找出所有需要绑定的数据属性，并在这些元素上创建Watcher实例。这样，当数据改变时，编译器的工作已经完成，后续的变化处理主要由Observer、Dep和Watcher负责。当我们new一个Vue实例时，程序的执行顺序如下： 1. **观察者模式**：在创建Vue实例时，通过Observer劫持实例的所有属性，使其能够监听数据的变化。 2. **编译DOM**：Compile解析HTML模板，找到需要绑定的元素，并在它们上添加Watcher的订阅，为后续的数据绑定做准备。 3. **数据变化触发更新**：当实例的数据发生变化时，Observer会检测到并通知Dep。Dep随后调度Watcher执行回调，更新视图。 4. **视图同步**：Watcher回调更新了视图后，整个数据绑定流程完成，确保了数据与UI的实时同步。为了进一步理解这个过程，我们可以通过一个简单的示例代码片段来感受： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <div id="app"> {{ message }} </div> <script src="vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); </script> </body> </html> ``` 在这个例子中，`{{ message }}` 是数据绑定的表达式，当`message`的值变化时，对应的文本节点也会相应更新。理解了这个基础，你就可以深入研究更复杂的双向数据绑定和响应式系统的细节。掌握Vue.js动态数据绑定的关键在于理解Dep、Observer、Watcher和Compile的角色及其交互。通过这种方式，你可以构建出高效、易维护的前端应用程序。

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>

<head>

</head>

<body>

</div>

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

vue.js动态数据绑定详解与实现过程

Vue.js动态数据绑定详解与实现路径

掌握Vue.js开发基础的实用学习笔记

前端Vue.js学习与源码解析笔记

Vue.js第一天学习笔记（数据的双向绑定、常用指令）

Vue.js第四天学习笔记（组件）

vue.js学习笔记之绑定style样式和class列表

Vue.js入门课程学习笔记

vue.js基础第一节笔记

vue.js数据绑定的方法（单向、双向和一次性绑定）

vue.js学习笔记

最新资源