设计模式

观察者模式

const queuedObservers = new Set();
const observe = fn => queuedObservers.add(fn);

//proxy 的set 方法
function set(target, key, value, receiver) {
    const result = Reflect.set(target, key, value, receiver);
    queuedObservers.forEach(observer => observer());
    console.log(result)
    return result;
}
//创建proxy代理
const observable = obj => new Proxy(obj, {set});
//被观察的 对象
const person = observable({
    name: '张三',
    age: 20
});


function print() {
    console.log(`${person.name}, ${person.age}`)
}
function print2() {
    console.log(`我是二号观察者：${person.name}, ${person.age}`)
}
//添加观察者
// observe(print);
observe(print2);
person.name = '李四';    

1 .这个意思是要触发所有的检测的函数
2 .监测到数组的变化，设置所有的更新函数发生变化。
3 .用到的地方，路由的设计，以及前端框架的设计也用到了观察者模式的思想。

Vue响应式原理

1 .先把数据传给Object.defineProperty，把属性转为setter/getter，在属性被访问和修改时通知变化。
2 .每个组件实例都有相应的watcher实例对象，在组件渲染的过程中让Vue依赖追踪，当setter被调用的时候，通知watcher重新计算，更新界面。此时的watcher在这里就是observe()函数
3 .Vue不能监测到对象的属性的添加或者删除。受到原来js的限制，但是es6的语法好像会监测到添加属性，所以这个语法还是会更高级一点。但是原来的也给出了解决办法。只是必须添加在嵌套属性的对象上，还是不能触发根级别的监视。
4 .这里需要注意一下对象的更新机制的监测情况
5 .Vue的局限：由于他不能动态添加根级别的响应式属性，所以必须在初始化的时候声明一个属性值，哪怕是空的值也可以。这样有一些安全性的考虑以及代码可维护性的方面的照顾，data对象就像是组件状态的概要，提前声明了所有的响应式属性，可以让代码在以后重新阅读的时候更加容易被理解。

异步更新队列

1 .Vue异步执行DOM更新，只要观察到数据变化，Vue将开启一个队列，并缓冲在统一事件循环中发生的所有数据改变，如果一个watcher被多次触发，那么只会被推入队列中一次（避免重复数据的不必要计算和dom操作）在下一个事件循环的时候，Vue刷新并执行实际的工作。
2 .vue在内部对异步队列使用原生的Promise.then和MessageChannel事件，如果执行环境不支持，那么使用setTimeout(fn,0)
3 .组件内的获取数据刷新的回调事件是this.$nextTick
4 .