Vue核心二:响应式原理

一.响应式原理概述
1.给Vue实例新增一个对象是否影响响应式?
2.给属性重新赋值成新对象,是否是响应式?
**数据驱动Vue核心二:响应式原理
Vue2.0原理
把一个普通 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是仅 ES5 支持,且无法 shim 的特性(兼容之前版本:优雅降级),这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。
Vue3.0原理
使用ES6中的proxy(代理对象)
直接监听对象,而不是属性(3.0处理多个属性的时候不需要循环)
ES6新增,IE不支持,性能由浏览器优化

get() defineProperty无参数 proxy有参数target,key 返回访问的属性的值 return target[key]
Vue核心二:响应式原理
二 发布订阅者模式
Vue核心二:响应式原理
模拟Vue自定义事件如何实现
发布订阅模式
Vue核心二:响应式原理Vue核心二:响应式原理
控制台:click1 click2