Vue源码剖析(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，在控制台将会打印 &＃8216;修正了 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.总结