Skip to main content

SSR

实现方式​

根据URL解析出对应的路由，然后进行数据的预获取，允许你预先获取数据。 这通常通过页面组件中的 asyncData 或 fetch 方法实现。

首先Nuxt应用会将页面脱水 dehydration ，也就是把 Vue.js 渲染成 HTML 这个过程包括应用的布局、页面和组件的渲染生成完整的 HTML 页面。

生成的 HTML被发送到客户端作为响应。这意味着用户将立即看到完整的页面但是还不能交互。

HTML 被客户端浏览器接收和解析，Vue.js客户端脚本会使页面变为动态的。这个过程称为注水hydration 这个时候才可以交互，这个时候vue客户端的生命周期开始生效，即客户端的 Vue.js 应用实例会接管服务端生成的静态 HTML。

路由​

它是 pages 目录来管理页面，每一个.vue文件在这个目录下都会自动转换成应用的一个路由。 布局是 layouts 文件夹，例如，pages/index.vue对应应用的根路由 /， 而 pages/about.vue将对应路由/about。_id 详情页 middleware 目录是中间件

React​

它两个大的循环, 它们分别位于 scheduler 和 react-reconciler。

合成事件​

  • 监听原生事件: 对齐DOM元素和fiber元素
  • 收集listeners: 遍历fiber树, 收集所有监听本事件的listener函数.
  • 派发合成事件: 构造合成事件, 遍历listeners进行派发.

Context​

结构是个链表

  • 在消费状态时,ContextConsumer节点调用 readContext() 获取最新状态.
  • 在更新状态时, 由 ContextProvider 节点负责查找所有ContextConsumer节点, 并设置消费节点的父路径上所有节点的fiber.childLanes, 保证消费节点可以得到更新.

主干逻辑​

主要的逻辑就是把所有的更新视图的代码都通过 reconciler 创建的队列 进行排队 然后注册回调输送给 scheduler 创建 task，然后又由通过 schedule 执行 task，然后通过回调回到 reconciler 生成 fiber 树，这个时候 fiber 树就是最新的，跟 react-dom 互相引用。批量更新和批量渲染也都是在 scheduler 这个 workloop 中通过优先级 tag 进行排队插队实现的。

electron​

启用上下文隔离 ,限制外部协议处理 shell.openExternal

webpack 联邦模块​

::: remotes shared exposes shared :::