数据绑定
Object.defineProperty 方法
- 该方法是 Object 的静态方法，它能在对象的某个属性被获取或者被设置时处理逻辑
let car = {}
let val=3000
Object.defineProperty(car,'price',{
enumerable:true,
configurable:true,
get(){
//do something
return val
}
set(newVal)
//do something
val = newVal
})
- defineProperty 方法缺点：只能对已知对象的属性进行监听，不能监听数组。对 ES6 的新对象如 map，set 无法监听。无法监听新增，删除属性等。
- ES6 proxy 对比
- proxy 监听的是整个对象而非属性，可以监听数组变化，具有多种劫持方式。
let p = new Proxy(target, handler);
- 其中的 target 为劫持的目标对象，可以是任何类型的对象，数组，函数，甚至是另一个代理对象。
- handler 是一个函数，里面写不同的劫持方式和逻辑。
- 例子：
- get 方法：get(target,property,receiver),它接收 3 个参数，第一个是目标对象，第二个是对象属性，第三个是 proxy 实例本身。
- set 方法：set(target, propKey, value, receiver)： 拦截对象属性的设置，比如 proxy.foo =
v 或 proxy[‘foo’] = v，返回一个布尔值。
Observer 类
<!-源码目录：src/observer/index.js-->
export function Observer (value) {
this.value = value
this.dep = new Dep()
def(value, '__ob__', this)
if (isArray(value)) {
var augment = hasProto
? protoAugment
: copyAugment
augment(value, arrayMethods, arrayKeys)
this.observeArray(value)
} else {
this.walk(value)
}
}
<!-源码目录：src/observer/index.js-->
Observer.prototype.walk = function (obj) {
var keys = Object.keys(obj)
for (var i = 0, l = keys.length; i < l; i++) {
this.convert(keys[i], obj[keys[i]])
}
}
vue 中定义了一个 Observer 类，可以递归的把一个对象中所有的属性包括子对象的属性变为可观测的
示例：
<div id="main">
<h1>count: {{times}}</h1>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#main',
data: function () {
return {
times: 1
};
},
created: function () {
var me = this;
setInterval(function () {
me.times++;
}, 1000);
}
});
</script>
归纳起来，Vue.js 在这里主要做了三件事：
通过 Observer 对 data 做监听，并且提供了订阅某个数据项变化的能力。
把 template 编译成一段 document fragment，然后解析其中的 Directive，得到每一个 Directive 所依赖的数据项和 update 方法。
通过 Watcher 把上述两部分结合起来，即把 Directive 中的数据依赖通过 Watcher 订阅在对应数据的 Observer 的 Dep 上。当数据变化时，就会触发 Observer 的 Dep 上的 notify 方法通知对应的 Watcher 的 update，进而触发 Directive 的 update 方法来更新 DOM 视图，最后达到模型和视图关联起来。
依赖收集
将数据变成可观测的之后，如果数据发生了变化，就需要去通知对应的视图发生变更
对于那些要跟着数据变化而做出响应的地方，我们就叫它为依赖集，可以用一个数组表示
**何时搜集依赖合适通知依赖
如果哪个地方使用了数据，那么在数据被获取的地方就能找到这些依赖并收集起来
如果数据在哪个地方被设置了，那么就在数据被设置的时候去通知之前收集的依赖
总结就是：在 getter 中收集依赖，在 setter 中更新依赖
Dep 类
vue 中定义了一个 dep 类，用于收集依赖，dep 类中有一个数组用于保存依赖项（watcher），dep 类中有一个 notify 方法，用于逐一通知依赖（watcher）更新
<!-源码目录：src/observer/dep.js-->
export default function Dep () {
this.id = uid++
this.subs = []
}
// the current target watcher being evaluated.
// this is globally unique because there could be only one
// watcher being evaluated at any time.
Dep.target = null
<!-源码目录：src/observer/dep.js-->
Dep.prototype.depend = function () {
Dep.target.addDep(this)
}
<!-源码目录：src/observer/dep.js-->
Dep.prototype.notify = function () {
// stablize the subscriber list first
var subs = toArray(this.subs)
for (var i = 0, l = subs.length; i < l; i++) {
subs[i].update()
}
}
Watcher 类
<!-源码目录：src/watcher.js-->
export default function Watcher (vm, expOrFn, cb, options) {
// mix in options
if (options) {
extend(this, options)
}
var isFn = typeof expOrFn === 'function'
this.vm = vm
vm._watchers.push(this)
this.expression = expOrFn
this.cb = cb
this.id = ++uid // uid for batching
this.active = true
this.dirty = this.lazy // for lazy watchers
this.deps = []
this.newDeps = []
this.depIds = new Set()
this.newDepIds = new Set()
this.prevError = null // for async error stacks
// parse expression for getter/setter
if (isFn) {
this.getter = expOrFn
this.setter = undefined
} else {
var res = parseExpression(expOrFn, this.twoWay)
this.getter = res.get
this.setter = res.set
}
this.value = this.lazy
? undefined
: this.get()
// state for avoiding false triggers for deep and Array
// watchers during vm._digest()
this.queued = this.shallow = false
}
Watcher 类是 Dep 收集的依赖项（subs）的抽象
一个 watcher 对应于模板中的一段指令的代码（expression）
其中包含的 update 方法是对视图渲染的逻辑。【按数据值进行渲染】
比如在解析模板的时候，编译器发现有个表达式(指令)，先生成一个 watcher 实例，在 Watcher 中，就有解析表达式和函数的方法。watcher 实例先将自己挂载到全局变量中，当这个表达式被执行的时候，会触发数据的 getter，在 getter 中将这个 watcher 保存至依赖，然后释放全局的 watcher 实例，这样就收集了一个依赖。然后在 setter 中，会遍历所有 watcher 调用其中的 update 方法去更新视图
在一次同步操作钟，多个被触发的 watcher 会被放入 watcher 队列中，并且去重，也就是说，同一个 watcher 同一次同步操作只会调用一次 update 方法。
虚拟 DOM
生命周期
- beforeCreate：最初调用触发，data和events都不能用。可以在这里处理整个系统加载的Loading；
- created：已经具有响应式的data，可以发送events。可以在这里去发送请求。
- beforeMount：在模板编译后，渲染之前触发。SSR中不可用。基本用不上整个Hook。
- mounted：在渲染之后触发，并可以访问组件中的DOM以及$ref，SSR中不可用。
- beforeUpdate：在数据改变后，模板改变前触发。切勿使用它监听数据变化（使用计算属性和watch监听）。
- updated：在数据改变后、模板改变后触发。常用于渲染后的打点、性能检测或者触发vue组件中非vue组件的更新。
- beforeDestroy：组件卸载前触发，可以在此时清理事件、计时器或者取消订阅操作。
- destroyed：卸载完毕后触发，可以做最后的打点或事件触发操作。
