【Vue】原理篇:实现数据监听

前言

Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，本文，我们将研究一下 Vue 响应式系统的一些原理

图示

响应式导图

主要成员

在响应式原理中，Observe、Dep、Watcher 这三个类是构成完整原理的主要成员,Compile则是负责解析vue el模板中引用的属性

new Vue({
  el:'#app',
  data:{
    name:"why",
    age:18
  }
})

    {{name}} 
    {{name}} 
    {{age}} 
    {{age}} 

---

• Observer监听劫持所有的vue data属性
  当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。
  每一个属性就有一个Dep对象,Dep对象存放着所有watcher
  name->Dep对象-subs[watcher1,watcher2]
  age->Dep对象-subs[watcher1,watcher2]

---

• Dep/Watcher
  当我们改变data中属性的值时,比如 name:'why' 改为 name:'cobe'时,会触发Observer对我们data属性的监听,监听到name属性发生变化,会调用name属性对应的Dep对象的notify函数,notify遍历所有watcher属性,调用update去更新视图

this.name='cobe';

---

• Compile解析vue el模板中引用的属性,如我们多次使用了date中的name和age属性
  解析el时
  1.每使用的一个属性就创建一个watcher,watcher会加到对应的dep的subs中;
  2.会根据el内容初始化到View(界面显示)

---

运行结果:

image.png