vue
VUE2数据双向绑定的原理
数据劫持(Data Observation):Vue 在初始化数据时,会对数据对象的每个属性使用 Object.defineProperty 方法进行劫持。这样一来,当访问或修改数据时,Vue 就能够监听到这些操作。
Getter 和 Setter:在劫持过程中,为每个属性添加了 getter 和 setter。Getter 负责侦听属性的读取操作,而 Setter 负责侦听属性的修改操作。 Getter 和 Setter
依赖追踪(Dependency Tracking):Vue 在内部维护着一个称为「依赖」的数据结构。每个属性都有一个对应的依赖列表。当属性被访问时,Watcher(后面会介绍)会被收集进属性的依赖列表中,表示该属性依赖于这些 Watcher。
Watcher:Watcher 是一个订阅者,它订阅属性的变化。在 Vue 中,一个组件的渲染过程会产生一个 Watcher,负责收集模板中所用到的属性的依赖。 观察家
派发更新(Dispatching Updates):当数据发生变化时,setter 会被触发,然后通知对应属性的所有 Watcher 进行更新。这些 Watcher 就会负责更新视图,确保视图与数据保持同步。
视图更新:一旦 Watcher 接收到数据变化的通知,它就会触发视图的更新操作。这样就完成了数据的双向绑定,即当数据发生变化时,视图会自动更新;反过来,用户的输入操作也会更新数据。
代码展示
html
<div id="app">
<input type="text" v-model="message">
<p>{
{ message }}</p>
</div>
javascript
// Vue构造函数
function Vue(options) {
this.data = options.data;
// 将data对象转换成响应式对象
observe(this.data);
// 模板解析和编译
compile(document.getElementById(options.el), this.data);
}
// 将对象转换为响应式对象
function observe(data) {
// 遍历data对象的属性
for (let key in data) {
let value = data[key];
// 为每个属性创建一个Dep对象(用于依赖收集)