2.vue双向数据绑定原理
现代 js 框架存在的根本原因
然而通常人们（自以为）使用框架是因为： 它们支持组件化； 它们有强大的社区支持； 它们有很多（基于框架的）第三方库来解决问题； 它们有很多（很好的）第三方组件; 它们有浏览器扩展工具来帮助调试； 它们适合做单页应用。
Keeping the UI in sync with the state is hard (UI与状态同步非常困难) 通过（添加）观察者监测变化，如 Angular 和 Vue.js。应用中状态的属性会被监测，当它们发生变化时，只有依赖了（发生变化）属性的 DOM 元素会被重新渲染。
数据劫持结合发布者-订阅者模式
1.属性拦截器-初步数据劫持
Object.defineProperty()
let a = {}
Object.defineProperty(a, 'b', {
enumerable: true,
configurable: true,
set (newValue){
console.log('set')
value = newValue
},
get (){
console.log('get')
return value
}
})
value = a.b
a.b = 1
console.log(a.b)
读a.b或者设置a.b时候触发get和set函数 configurable如果为false,那么不可以修改, 不可以删除. writable给的说明是如果设置为false,不可以采用 数据运算符,进行赋值
2.想实现一个这样的功能
当我们试图修改 a 的值时：ins.a = 2，在控制台将会打印 '修改了 a’, 乍一看比较简单 考虑到复杂情况, 比如如何避免收集重复的依赖，如何深度观测，如何处理数组以及其他边界条件等等
const ins = new Vue({
data: {
a: 1
}
})
ins.$watch('a', () => {
console.log('修改了 a')
})
3.收集依赖, 起码需要一个”筐“
// dep 数组就是我们所谓的“筐”
const dep = []
Object.defineProperty(data, 'a', {
set () {
// 当属性被设置的时候，将“筐”里的依赖都执行一次
dep.forEach(fn => fn())
},
get () {
// 当属性被获取的时候，把依赖放到“筐”里
dep.push(fn)
}
})
$watch('a', () => {
console.log('设置了 a')
})
4.$watch 函数是知道当前正在观测的是哪一个字段的
const data = {
a: 1
}
const dep = []
Object.defineProperty(data, 'a', {
set () {
dep.forEach(fn => fn())
},
get () {
// 此时 Target 变量中保存的就是依赖函数
dep.push(Target)
}
})
// Target 是全局变量
let Target = null
function $watch (exp, fn) {
// 将 Target 的值设置为 fn
Target = fn
// 读取字段值，触发 get 函数
data[exp]
}
明白数据响应系统的整体思路,为接下来真正进入 Vue 源码做必要的铺垫
4.observer
observe工厂函数
const data = {
a: 1
}
const data = {
a: 1,
// __ob__ 是不可枚举的属性
__ob__: {
value: data, // value 属性指向 data 数据对象本身，这是一个循环引用
dep: dep实例对象, // new Dep()
vmCount: 0
}
}
new Observer(data)
Observer构造函数-调用this.walk(value)-defineReactive(get和set)
get 调用 dep.depend() 在 get 函数中如何收集依赖
set 调用 dep.notify() 通知更新
5.dep
static target; // watcher
id; //记录id不能重复收集
subs; //数组,sub收集所以的watcher
dep.notify()实际上是 watcher里的update() 渲染更新 dep.depend()实际上是 watcher里的update() 渲染更新 把watcher实例对象推入subs
6.watcher vm, vue实例对象 expOrFn, 表达式 cb, 回调函数
当然还在vm上定义了很多其他的computer,watch之类的 收集依赖,要想收集,必须 new watcher()
get () {
pushTarget(this)
}
addDep (){
dep.addSub(this) // 把watcher自己加入dep.subs数组
}
update(){
queueWatcher() //排队渲染
}
6.总结
