Hydration 是什么？

2024-05-13 22:56:31

文章目录

Hydration 是什么？
- 1. 前言
- 2. Hydration
- 3. Todo

Hydration 是什么？

1. 前言

看 VueConf 2021 尤大大关于 Vue3 生态进展中关于 vitepress 会减少很多 hydration 的开销，原谅我的孤陋寡闻，实在不知道什么是 hydration，于是只好 google 一下，在此进行记录。

PS：因为 hydration 我并没有找到官方的文档，因此是否完全正确我也不敢保证，有错误可提出，我也会实时的更新。

2. Hydration

Hydration 代表的是给对象填充数据的这一过程。

Hydration 翻译过来为 “水合”，因此下面就用 “水合” 来代替；

在框架之下，为了拥有更好的性能，一个对象被实例化时并不会立马进行“水合”（填充数据），而这个对象是变现为具有数据的实体对象的，而是当对象中的数据被访问是才会执行“水合”。这是一种有助于避免加载不使用的数据的方法。

此外，当讨论从数据库或者其它数据源加载数据时，一般也会谈到 “水合”。比如：

当从某数据源加载很多数据时，此时仅仅只是装载一部分数据而不是全部到一个对象时，可以说是部分"水合"。之所以这样做，是因为当前操作不需要这些其他字段m所以就没有必要去浪费带宽和CPU去加载、传输以及设置这些不被使用的数据。

其实我们最常见的一种"水合"就是序列化和反序列化，反序列化 == 实例化 + 水合

3. Todo

只是大概知道了基本概念，但实际的过程，其中的原由还不是很清晰，期望之后能够查阅到更多的资料来深入的理解。

参考资料： what does it mean to hydrate an object

Hydration 是什么？相关推荐

Hydration failed because the initial UI does not match what was rendered on the server.问题原因之一
一. 环境 next.js: "12.1.6" react.js: "18.1.0" 三. 报错内容三. 报错原因 3.1 第一种情况 p标签嵌套了p标签或者 ...
Vue.js 3 ssr 中报错Hydration node mismatch: - Client vnode: div - Server rendered DOM:已解决
使用nuxt框架+ element + vue3 出现该问题解决方案该问题其实是由于在开发阶段本地服务器的代码与浏览器的代码不一致导致的问题,可以执行一次build命令,可以解决该问题,实际到部署 ...
Hydration failed because the initial UI does not match what was rendered on the server
react18在nextjs中包错,解决方法: 1.方法1 react 18降到17 2. 方法2 如下图参考: https://github.com/vercel/next.js/discussi ...
使用 Vue 2.0 实现服务端渲染的 HackerNews
Vue 2.0 支持服务端渲染 (SSR),并且是流式的,可以做组件级的缓存,这使得极速渲染成为可能.同时, 和 2.0 也都能够配合 SSR 提供同构路由和客户端 state hydration.v ...
vue：虚拟dom的实现
Vitual DOM是一种虚拟dom技术,本质上是基于javascript实现的,相对于dom对象,javascript对象更简单,处理速度更快,dom树的结构,属性信息都可以很容易的用javascr ...
微软打造了全球最大的Git代码库
丹棱君有话说:今年 2 月,微软宣布将用 Git 管理 Windows 源代码.随后,Visual Studio 宣布开发 "Git 虚拟文件系统(GVFS)",并将在终极项目和超 ...
VS Code 成主宰、Vue 备受热捧！2019 前端开发趋势必读
前端在生产和开发中占据着越来越重要的地位,PC 端.手机端.桌面端.智能手表端等等设备都离不开前端的身影.本文将围绕框架.编程语言.工具.React.Vue 等方面,全面回顾 2019 年前端与 We ...
Vue2 源码漫游（二）
Vue2 源码漫游(二) 描述: 在(一)中其实已经把Vue作为MVVM的框架中数据流相关跑了一遍.这一章我们先看mount这一步,这样Vue大的主线就基本跑通了.然后我们再去看compile,v-b ...
干货 | 携程度假无线前端架构演进之路
作者简介 Jade Gu,携程高级前端开发专家,负责度假前端框架设计和 Node.js 基础设施建设等工作. 这篇文章将简略地介绍我们当前的无线前端架构设计及其演进之路.主要内容包含以下几个部分,希望 ...

最新文章

热门文章