数据驱动
- 数据响应式、双向绑定、数据驱动
- 数据响应式
数据模型仅仅是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，避免了繁琐的 DOM 操作，提高开发效率 - 双向绑定
数据改变，视图改变；视图改变，数据也随之改变
我们可以使用 v-model 在表单元素上创建双向数据绑定 - 数据驱动是 Vue 最独特的特性之一
开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图
数据响应式的核心原理
Vue 2.x
- Object.defineProperty
- 浏览器兼容 IE8 以上（不兼容 IE8）
// 模拟 Vue 中的 data 选项
let data = { msg: 'hello' }
// 模拟 Vue 的实例
let vm = {}
// 数据劫持：当访问或者设置 vm 中的成员的时候，做一些干预操作
Object.defineProperty(vm, 'msg', {
// 可枚举（可遍历）
enumerable: true,
// 可配置（可以使用 delete 删除，可以通过 defineProperty 重新定义）
configurable: true,
// 当获取值的时候执行
get () {
console.log('get: ', data.msg)
return data.msg
},
// 当设置值的时候执行
set (newValue) {
console.log('set: ', newValue)
if (newValue === data.msg) {
return
}
data.msg = newValue
// 数据更改，更新 DOM 的值
document.querySelector('#app').textContent = data.msg
}
})
// 测试 vm.msg = 'Hello World'
console.log(vm.msg)
Vue 3.x
- Proxy
- 直接监听对象，而非属性。
- ES 6中新增，IE 不支持，性能由浏览器优化
// 模拟 Vue 中的 data 选项
let data = { msg: 'hello', count: 0 }
// 模拟 Vue 实例
let vm = new Proxy(data, {
// 当访问 vm 的成员会执行
get (target, key) {
console.log('get, key: ', key, target[key])
return target[key]
},
// 当设置 vm 的成员会执行
set (target, key, newValue) {
console.log('set, key: ', key, newValue)
if (target[key] === newValue) {
return
}
target[key] = newValue
document.querySelector('#app').textContent = target[key]
}
})
// 测试
vm.msg = 'Hello World'
console.log(vm.msg)
发布订阅模式和观察者模式
发布/订阅模式
- 订阅者
- 发布者
- 信号中心
我们假定，存在一个"信号中心"，某个任务执行完成，就向信号中心"发布"（publish）一个信号，其他任务可以向信号中心"订阅"（subscribe）这个信号，从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"（publish-subscribe pattern）
观察者模式
- 观察者(订阅者) -- Watcher
update()：当事件发生时，具体要做的事情 - 目标(发布者) -- Dep
subs 数组：存储所有的观察者
addSub()：添加观察者
notify()：当事件发生，调用所有观察者的 update() 方法 - 没有事件中心
总结:
观察者模式是由具体目标调度，比如当事件触发，Dep 就会去调用观察者的方法，所以观察者模式的订阅者与发布者之间是存在依赖的。
发布/订阅模式由统一调度中心调用，因此发布者和订阅者不需要知道对方的存在。
Vue 响应式原理模拟
- 整体分析
- Vue
把 data 中的成员注入到 Vue 实例，并且把 data 中的成员转成 getter/setter - Observer
能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知 Dep - Compiler
解析每个元素中的指令/插值表达式，并替换成相应的数据 - Dep
添加观察者(watcher)，当数据变化通知所有观察者 -
Watcher
数据变化更新视图
Vue
负责接收初始化的参数(选项)
负责把 data 中的属性注入到 Vue 实例，转换成 getter/setter
负责调用 observer 监听 data 中所有属性的变化
负责调用 compiler 解析指令/插值表达式Observer
负责把 data 选项中的属性转换成响应式数据
data 中的某个属性也是对象，把该属性转换成响应式数据
数据变化发送通知Compiler
负责编译模板，解析指令/插值表达式
负责页面的首次渲染
当数据变化后重新渲染视图-
Dep(Dependency)
收集依赖，添加观察者(watcher)
通知所有观察者
image.png -
Watcher
当数据变化触发依赖，dep 通知所有的 Watcher 实例更新视图
自身实例化的时候往 dep 对象中添加自己
7.总结
- 给属性重新赋值成对象，是否是响应式的？
是 - 给 Vue 实例新增一个成员是否是响应式的？
否
检测变化的注意事项
