深入理解vue相关的底层原理

keep-alive 组件的作用及原理

keep-alive 是 Vue 提供的一个内置组件，在组件切换过程中将状态保留在内存中，防止重复渲染 DOM。

如果为一个组件包裹了 keep-alive，那么它会多出两个生命周期：deactivated、activated。同时，beforeDestroy 和 destroyed 就不会再被触发了，因为组件不会被真正销毁：

• 组件被换掉时，会被缓存到内存中，触发 deactivated 生命周期
• 当组件被切回来时，再去缓存里找这个组件，触发activated钩子函数

原理：Vue内部将DOM节点抽象成了一个个的VNode 节点，keep-alive 组件的缓存也是基于 VNode 节点的而不是直接存储 DOM 结构。它将满足条件（pruneCache 与 pruneCache）的组件在 cache 对象中缓存起来，在需要重新渲染的时候再将 VNode 节点从 cache 对象中取出并渲染。

Vue 是如何实现数据双向绑定的

可以实现双向绑定的方法有很多，KnockoutJS 基于观察者模式的双向绑定，Ember 基于数据模型的双向绑定，Angular 基于脏检查的双向绑定，Vue 是基于数据劫持的双向绑定。

基于数据劫持的双向绑定离不开 Proxy 与 Object.defineProperty 等方法对对象/对象属性的劫持，我们要实现一个完整的双向绑定需要以下几个要点：

1. 利用 Proxy 或 Object.defineProperty 生成的 Observer 针对对象/对象的属性进行「劫持」，在数据变更的时候通知 Watcher 因为属性可能是多个，所以会有多个订阅者，故我们需要一个消息订阅器 Dep 来专门收集这些订阅者，并在监听器 Observer 和订阅者 Watcher 之间进行统一的管理
2. 解析器 Compile 解析模板中的 Directive(指令)，收集指令所依赖的方法和数据，替换模板数据，将相关指令初始化成一个订阅者 Watcher，等待数据变化然后进行渲染
3. Watcher 属于 Observer 和 Compile 桥梁，它将接收到的 Observer 产生的数据变化，并根据 Compile 提供的指令进行视图渲染，使得数据变化驱动视图变化

利用 Object.defineProperty 劫持对象的访问器，在属性值发生变化时我们可以获取变化，然后根据变化进行后续响应，在 Vue3.0 中通过 Proxy 对象进行类似的操作。

Proxy 相比于 defineProperty 的优势

Object.defineProperty 的优势：兼容性好，支持 IE9+

Object.defineProperty 缺陷：

1. 对普通对象的监听需要遍历每一个属性
2. 无法监听数组的变动
3. 无法监听 Map/Set 数据结构的变动
4. 无法对对象新增/删除的属性进行监听

Proxy 优势如下：

• Proxy 可以直接监听对象而非属性
• Proxy 可以直接监听数组的变化
• Proxy 有多达 13 中拦截方式，不限于 apply, ownKeys, deleteProperty, has 等等是 Object.defineProperty 不具备的
• Proxy 返回的是一个新对象，可以只操作新对象达到目的，而 Object.defineProperty 只能遍历对象属性直接修改
• Proxy 作为新标准将收到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利