可可的博客

keep-alive 能够保存当前被缓存的组件的完整状态，而不仅仅是页面上的显示。它会缓存组件的 数据、生命周期钩子 和 DOM 状态，所以当你切换回去时，组件的所有状态都会恢复到你离开时的状态。具体行为数据保存：keep-alive 缓存的组件会保留其内部的所有 data 数据，例如表单内容、输入框的值等。DOM 状态保存：例如滚动位置、已打开的弹窗、展开的部分都会保持。生命周期钩子：被缓存的组件在切换离开时不会触发 destroyed 钩子。

理解基本概念 ·SPA(single-page application)单页应用，默认情况下我们编写 Vue、React 都只有一个html 页面，并且提供一个挂载点，最终打包后会再此页面中引入对应的资源。(页面的渲染全部是由JS动态进行渲染的)。Rendering，服务器端渲染 SSR 如何分清在哪渲染:HTML 是在前端动态生成的“客户端染”，在服务端处理好并返回的是“服务端渲染。每个页面必须重复加载，js，css 等相关资源。组件要合理的划分，如果不拆分组件，那更新的时候整个页面都要重新更新。

Virtual DOM 就是用js 对象来描述真实 DOM，是对真实 DOM 的抽象，由于直接操作 DOM 性能低但是is 层的操作效率高，可以将 DOM 操作转化成对象操作，最终通过 diff 算法比对差异进行更新 DOM(减少了对真实DOM的操作)。当响应式数据发生变化时，将会引起组件重新 render，此时就会生成新的VDOM-newVnode。使用oldVnode 与newVnode 做 diff 操作，将更改的部分应到真实 DOM 上从而转换为最小量的 dom操作，高效更新视图。