qq_41037004的博客

在同构渲染过程中，组件的代码会分别在服务端和浏览器中执行一次。在服务端，组件会被渲染为静态的HTML字符串，并发送给浏览器。浏览器则会渲染由服务端返回的静态的HTML内容，并下载打包在静态资源中的组件代码。当下载完毕后，浏览器会解释并执行该组件代码。当组件代码在客户端执行时，由于页面中已经存在对应的DOM元素，所以渲染器并不会执行创建DOM元素的逻辑，而是会执行激活操作。在通过Vite搭建的同构项目中，可以使用环境变量。来判断当前代码的运行环境。

Vue的模板编译器用于把模板编译为渲染函数。即把</编译为工作流程如下：fill:#333;color:#333;color:#333;fill:none;模板词法分析语法分析模板AST代码生成渲染函数。

使用虚拟节点的vnode.type属性来存储组件对象，渲染器根据虚拟节点的该属性来判断它是否是组件。如果是组件，则渲染器会使用mountComponent和patchComponent来完成组件的挂载和更新。

快速Diff算法包含预处理步骤，先处理新旧两组子节点中相同的前置节点和相同的后置节点。

双端Diff算法是一种同时对新旧两组子节点的两个端点进行比较的算法。因此，需要四个索引值，分别指向新旧两组子节点的端点。依次比较①②③④，当新旧节点的key值相同时，可以进行DOM复用。

对于新旧两组子节点的更新，若直接卸载全部旧子节点，再挂载全部新子节点，会产生极大的性能开销。改进方案：遍历新旧两组子节点中数量较少的那一组，并逐个调用patch函数进行打补丁，然后比较新旧两组子节点是数量，如果新的一组子节点数量更多，说明有新子节点需要挂载；否则说明在旧的一组子节点中，有节点需要卸载。

渲染器8.挂载与更新8.1挂载子节点和元素的属性function mountElement(vnode, container) { const el = createElement(vnode.type) if (typeof vnode.children === 'string') { setElementText(el, vnode.children) } else if (Array.isArray(vnode.children)) { v

在浏览器平台上，渲染器可以利用DOM API完成DOM元素的创建、修改和删除。为了让渲染器不直接依赖浏览器平台特有的API，将这些操作抽象成可配置的对象。用户可以在调用createRenderer函数创建渲染器的时候指定自定义的配置对象，从而实现自定义的行为。const {if(!n1) {console . log(` 创建元素 ${ tag } `) return {

由于Proxy的代理目标必须是非原始值，所以不能拦截对原始值的操作。为此，需要使用一个非原始值去包裹原始值。

Proxy用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。target：要使用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。handler：一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理p的行为。一个 可撤销 的代理是可以被禁用的代理。假设我们有一个资源，并且想随时关闭对该资源的访问。我们可以做的是将它包装成可一个撤销的代理，没有任何捕捉器。

副作用函数的执行会直接或间接影响其他函数的执行。

视图层框架通常分为命令式和声明式，命令式框架更关注过程，声明式框架更关注结果。对应的声明式代码为：