SeriousLose

React中如何使用组件？◦ Angular中如何使用组件？◦ Vue中如何使用组件？

数据驱动数据响应式 数据模型仅仅是普通js对象，而当我们修改数据时，视图会进行更新，避免了繁琐的DOM操作，提高了开发效率 双向绑定 数据改变，视图改变； 视图改变，数据也随之改变； v-model在表单元素上创建双向数据绑定； 数据驱动 数据驱动是Vue最独特的特性之一 开发过程中仅需要关注数据本身，不需要关注数据是如何渲染到视图的 响应式原理响应式原理2.x响应式原理Object.defineProperty 转换为getter/setter MDN..

Watcher 功能 当数据变化触发依赖， dep 通知所有的 Watcher 实例更新视图 自身实例化的时候往 dep 对象中添加自己 class Watcher { constructor(vm, key, cb) { this.vm = vm //...

Dep 功能 收集依赖，添加观察者(watcher) 通知所有观察者 class Dep { constructor() { // 存储所有的观察者 this.subs = [] } // 添加观察者 addSub (sub) { if (sub && sub.u...

Compiler 功能 负责编译模板，解析指令/插值表达式 负责页面的首次渲染 当数据变化后重新渲染视图 // 负责解析指令/插值表达式class Compiler { constructor(vm) { this.vm = vm this.el = vm.$el ...

Observer 功能 负责把 data 选项中的属性转换成响应式数据 data 中的某个属性也是对象，把该属性转换成响应式数据 数据变化发送通知 添加 Dep 和 Watcher 的依赖关系 数据变化发送通知 ...

Vue 功能 负责接收初始化的参数(选项) 负责把 data 中的属性注入到 Vue 实例，转换成 getter/setter 负责调用 observer 监听 data 中所有属性的变化 负责调用 compiler 解析指令/插值表达式 ...

Vue 把data中的成员注入到Vue实例，并且把data中的成员转化为getter/setter Observer 能够对数据对象的所有属性进行监听，如有变动可以拿到最新值并通知Dep Vue 功能 负责接收初始化的参数(选项) ...

观察者模式 观察者(订阅者) -- Watcher update()：当事件发生时，具体要做的事情 目标(发布者) -- Dep subs 数组：存储所有的观察者 addSub()：添加观察者 notify()：当事件发生，调用所有观察者的 update() 方...

发布/订阅模式 订阅者 发布者 信号中心 我们假定，存在一个"信号中心”， 某个任务执行完成，就向信号中心"发布"（publish）一个信号， 其他任务可以向信号中心"订阅"（subscribe）这个信号，从而知道什么时候自己可以开始执行。 这就叫做"发布/订阅