vue3静态提升原理解析

于 2024-07-21 18:32:37 发布
阅读量783 收藏 11
点赞数 19
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dfc_dfc/article/details/140591719
版权

什么是静态提升？

我们先来看一个 demo，代码如下：

<template>
  <div>
    <h1>title</h1>
    <p>{{ msg }}</p>
    <button @click="handleChange">change msg</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const msg = ref("hello");

function handleChange() {
  msg.value = "world";
}
</script>

这个 demo 代码很简单，其中的 h1 标签就是我们说的静态节点，p 标签就是动态节点。点击 button 按钮会将响应式msg变量的值更新，然后会执行 render 函数将msg变量的最新值"world"渲染到 p 标签中。

我们先来看看未开启静态提升之前生成的 render 函数是什么样的：

由于在 vite 项目中启动的 vue 都是开启了静态提升，所以我们需要在 Vue 3 Template Explorer 网站中看看未开启静态提升的 render 函数的样子（网站 URL 为： template-explorer.vuejs.org/ ），如下图将hoistStatic这个选项取消勾选即可：

在这里插入图片描述

未开启静态提升生成的 render 函数如下：

import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("template", null, [
    _createElementVNode("div", null, [
      _createElementVNode("h1", null, "title"),
      _createElementVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */),
      _createElementVNode("button", { onClick: _ctx.handleChange }, "change msg", 8 /* PROPS */, ["onClick"])
    ])
  ]))
}

每次响应式变量更新后都会执行 render 函数，每次执行 render 函数都会执行createElementVNode方法生成 h1 标签的虚拟 DOM。但是我们这个 h1 标签明明就是一个静态节点，根本就不需要每次执行 render 函数都去生成一次 h1 标签的虚拟 DOM。

vue3 对此做出的优化就是将“执行createElementVNode方法生成 h1 标签虚拟 DOM 的代码”提取到 render 函数外面去，这样就只有初始化的时候才会去生成一次 h1 标签的虚拟 DOM，也就是我们这篇文章中要讲的“静态提升”。开启静态提升后生成的 render 函数如下：

import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

const _hoisted_1 = /*#__PURE__*/_createElementVNode("h1", null, "title", -1 /* HOISTED */)

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("template", null, [
    _createElementVNode("div", null, [
      _hoisted_1,
      _createElementVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */),
      _createElementVNode("button", {
        onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.handleChange && _ctx.handleChange(...args)))
      }, "change msg")
    ])
  ]))
}

从上面可以看到生成 h1 标签虚拟 DOM 的createElementVNode函数被提取到 render 函数外面去执行了，只有初始化时才会执行一次将生成的虚拟 DOM 赋值给_hoisted_1变量。在 render 函数中直接使用_hoisted_1变量即可，无需每次执行 render 函数都去生成 h1 标签的虚拟 DOM，这就是我们这篇文章中要讲的“静态提升”。

我们接下来 通过 debug 的方式来带你搞清楚 vue 是如何实现静态提升的，注：本文使用的 vue 版本为3.4.19

如何实现静态提升

实现静态提升主要分为两个阶段：

  • transform阶段遍历 AST 抽象语法树，将静态节点找出来进行标记和处理，然后将这些静态节点塞到根节点的hoists数组中。
  • generate阶段遍历上一步在根节点存的hoists数组，在render 函数外去生成存储静态节点虚拟 DOM 的_hoisted_x变量。然后在 render 函数中使用这些_hoisted_x变量表示这些静态节点。

transform 阶段

在我们这个场景中transform函数简化后的代码如下：

function transform(root, options) {
  // ...省略
  if (options.hoistStatic) {
    hoistStatic(root, context);
  }
  root.hoists = context.hoists;
}

从上面可以看到实现静态提升是执行了hoistStatic函数，我们给hoistStatic函数打个断点。让代码走进去看看hoistStatic函数是什么样的，在我们这个场景中简化后的代码如下：

function hoistStatic(root, context) {
  walk(root, context, true);
}

从上面可以看到这里依然不是具体实现的地方，接着将断点走进walk函数。在我们这个场景中简化后的代码如下：

function walk(node, context, doNotHoistNode = false) {
  const { children } = node;
  for (let i = 0; i < children.length; i++) {
    const child = children[i];
    if (
      child.type === NodeTypes.ELEMENT &&
      child.tagType === ElementTypes.ELEMENT
    ) {
      const constantType = doNotHoistNode
        ? ConstantTypes.NOT_CONSTANT
        : getConstantType(child, context);
      if (constantType > ConstantTypes.NOT_CONSTANT) {
        if (constantType >= ConstantTypes.CAN_HOIST) {
          child.codegenNode.patchFlag = PatchFlags.HOISTED + ` /* HOISTED */`;
          child.codegenNode = context.hoist(child.codegenNode);
          continue;
        }
      }
    }

    if (child.type === NodeTypes.ELEMENT) {
      walk(child, context);
    }
  }
}

我们先在 debug 终端上面看看传入的第一个参数node是什么样的，如下图：

在这里插入图片描述

从上面可以看到此时的node为 AST 抽象语法树的根节点，树的结构和template中的代码刚好对上。外层是 div 标签，div 标签下面有 h1、p、button 三个标签。

我们接着来看walk函数，简化后的walk函数只剩下一个 for 循环遍历node.children。在 for 循环里面主要有两块 if 语句：

  • 第一块 if 语句的作用是实现静态提升
  • 第二块 if 语句的作用是递归遍历整颗树。

我们来看第一块 if 语句中的条件，如下：

if (
  child.type === NodeTypes.ELEMENT &&
  child.tagType === ElementTypes.ELEMENT
)

在将这块 if 语句之前，我们先来了解一下这里的两个枚举。NodeTypes和ElementTypes

NodeTypes枚举

NodeTypes表示 AST 抽象语法树中的所有 node 节点类型，枚举值如下：

enum NodeTypes {
  ROOT, // 根节点
  ELEMENT,  // 元素节点，比如：div元素节点、Child组件节点
  TEXT, // 文本节点
  COMMENT,  // 注释节点
  SIMPLE_EXPRESSION,  // 简单表达式节点，比如v-if="msg !== 'hello'"中的msg!== 'hello'
  INTERPOLATION,  // 双大括号节点，比如{{msg}}
  ATTRIBUTE,  // 属性节点，比如 title="我是title"
  DIRECTIVE,  // 指令节点，比如 v-if=""
  // ...省略
}

看到这里有的小伙伴可能有疑问了，为什么 AST 抽象语法树中有这么多种节点类型呢？

我们来看一个例子你就明白了，如下：

<div v-if="msg !== 'hello'" title="我是title">msg为 {{ msg }}</div>

上面这段代码转换成 AST 抽象语法树后会生成很多 node 节点：

  • div对应的是ELEMENT元素节点
  • v-if对应的是DIRECTIVE指令节点
  • v-if中的msg !== 'hello'对应的是SIMPLE_EXPRESSION简单表达式节点
  • title对应的是ATTRIBUTE属性节点
  • msg为对应的是ELEMENT元素节点
  • {{ msg }}对应的是INTERPOLATION双大括号节点

ElementTypes枚举

div 元素节点、Child 组件节点都是NodeTypes.ELEMENT元素节点，那么如何区分是不是组件节点呢？就需要使用ElementTypes枚举来区分了，如下：

enum ElementTypes {
  ELEMENT,  // html元素
  COMPONENT,  // 组件
  SLOT, // 插槽
  TEMPLATE, // 内置template元素
}

现在来看第一块 if 条件，你应该很容易看得懂了：

if (
  child.type === NodeTypes.ELEMENT &&
  child.tagType === ElementTypes.ELEMENT
)

如果当前节点是 html 元素节点，那么就满足 if 条件。

当前的 node 节点是最外层的 div 节点，当然满足这个 if 条件。

接着将断点走进 if 条件内，第一行代码如下：

const constantType = doNotHoistNode
  ? ConstantTypes.NOT_CONSTANT
  : getConstantType(child, context);

在搞清楚这行代码之前先来了解一下ConstantTypes枚举

ConstantTypes枚举

我们来看看ConstantTypes枚举，如下：

enum ConstantTypes {
  NOT_CONSTANT = 0, // 不是常量
  CAN_SKIP_PATCH, // 跳过patch函数
  CAN_HOIST,  // 可以静态提升
  CAN_STRINGIFY,  // 可以预字符串化
}

ConstantTypes枚举的作用就是用来标记静态节点的 4 种等级状态，高等级的状态拥有低等级状态的所有能力。比如： NOT_CONSTANT：表示当前节点不是静态节点。比如下面这个 p 标签使用了msg响应式变量：

<p>{{ msg }}</p>

const msg = ref("hello");

CAN_SKIP_PATCH：表示当前节点在重新执行 render 函数时可以跳过patch函数。比如下面这个 p 标签虽然使用了变量name，但是name是一个常量值。所以这个 p 标签其实是一个静态节点，但是由于使用了name变量，所以不能提升到 render 函数外面去。

<p>{{ name }}</p>
const name = "name";

CAN_HOIST：表示当前静态节点可以被静态提升，当然每次执行 render 函数时也无需执行patch函数。demo 如下：

<h1>title</h1>

CAN_STRINGIFY：表示当前静态节点可以被预字符串化，下一篇文章会专门讲预字符串化。 从 debug 终端中可以看到此时doNotHoistNode变量的值为 true，所以constantType变量的值为ConstantTypes.NOT_CONSTANT。 getConstantType函数的作用是根据当前节点以及其子节点拿到静态节点的constantType。

我们接着来看后面的代码，如下：

if (constantType > ConstantTypes.NOT_CONSTANT) {
  if (constantType >= ConstantTypes.CAN_HOIST) {
    child.codegenNode.patchFlag = PatchFlags.HOISTED + ` /* HOISTED */`;
    child.codegenNode = context.hoist(child.codegenNode);
    continue;
  }
}

前面我们已经讲过了，当前 div 节点的constantType的值为ConstantTypes.NOT_CONSTANT，所以这个 if 语句条件不通过。

我们接着看walk函数中的最后一块代码，如下：

if (child.type === NodeTypes.ELEMENT) {
  walk(child, context);
}

前面我们已经讲过了，当前 child 节点是 div 标签，所以当然满足这个 if 条件。将子节点 div 作为参数，递归调用walk函数。

我们再次将断点走进walk函数，和上一次执行walk函数不同的是，上一次walk函数的参数为 root 根节点，这一次参数是 div 节点。

同样的在walk函数内先使用 for 循环遍历 div 节点的子节点，我们先来看第一个子节点 h1 标签，也就是需要静态提升的节点。很明显 h1 标签是满足第一个 if 条件语句的：

if (
  child.type === NodeTypes.ELEMENT &&
  child.tagType === ElementTypes.ELEMENT
)

在 debug 终端中来看看 h1 标签的constantType的值，如下：

在这里插入图片描述

从上图中可以看到 h1 标签的constantType值为 3，也就是ConstantTypes.CAN_STRINGIFY。表明 h1 标签是最高等级的预字符串，当然也能静态提升。

h1 标签的constantType当然就能满足下面这个 if 条件：

if (constantType > ConstantTypes.NOT_CONSTANT) {
  if (constantType >= ConstantTypes.CAN_HOIST) {
    child.codegenNode.patchFlag = PatchFlags.HOISTED + ` /* HOISTED */`;
    child.codegenNode = context.hoist(child.codegenNode);
    continue;
  }
}

值得一提的是上面代码中的codegenNode属性就是用于生成对应 node 节点的 render 函数。

然后以codegenNode属性作为参数执行context.hoist函数，将其返回值赋值给节点的codegenNode属性。如下：

child.codegenNode = context.hoist(child.codegenNode);

上面这行代码的作用其实就是将原本生成 render 函数的codegenNode属性替换成用于静态提升的codegenNode属性。

context.hoist方法

将断点走进context.hoist方法，简化后的代码如下：

function hoist(exp) {
  context.hoists.push(exp);
  const identifier = createSimpleExpression(
    `_hoisted_${context.hoists.length}`,
    false,
    exp.loc,
    ConstantTypes.CAN_HOIST
  );
  identifier.hoisted = exp;
  return identifier;
}

我们先在 debug 终端看看传入的codegenNode属性。如下图：

在这里插入图片描述

从上图中可以看到此时的codegenNode属性对应的就是 h1 标签，codegenNode.children对应的就是 h1 标签的 title 文本节点。codegenNode属性的作用就是用于生成 h1 标签的 render 函数。

在hoist函数中首先执行 context.hoists.push(exp)将 h1 标签的codegenNode属性 push 到context.hoists数组中。context.hoists是一个数组，数组中存的是 AST 抽象语法树中所有需要被静态提升的所有 node 节点的codegenNode属性。

接着就是执行createSimpleExpression函数生成一个新的codegenNode属性，我们来看传入的第一个参数：

`_hoisted_${context.hoists.length}`

由于这里处理的是第一个需要静态提升的静态节点，所以第一个参数的值_hoisted_1。如果处理的是第二个需要静态提升的静态节点，其值为_hoisted_2，依次类推。

接着将断点走进createSimpleExpression函数中，代码如下：

function createSimpleExpression(
  content,
  isStatic = false,
  loc = locStub,
  constType = ConstantTypes.NOT_CONSTANT
) {
  return {
    type: NodeTypes.SIMPLE_EXPRESSION,
    loc,
    content,
    isStatic,
    constType: isStatic ? ConstantTypes.CAN_STRINGIFY : constType,
  };
}

这个函数的作用很简单，根据传入的内容生成一个简单表达式节点。我们这里传入的内容就是_hoisted_1。

表达式节点我们前面讲过了，比如：v-if="msg !== 'hello'"中的msg!== 'hello'就是一个简单的表达式。

同理上面的_hoisted_1表示的是使用了一个变量名为_hoisted_1的表达式。

我们在 debug 终端上面看看hoist函数返回值，也就是 h1 标签新的codegenNode属性。如下图：

在这里插入图片描述

此时的codegenNode属性已经变成了一个简单表达式节点，表达式的内容为：_hoisted_1。后续执行generate生成 render 函数时，在 render 函数中 h1 标签就变成了表达式：_hoisted_1。

最后再执行transform函数中的root.hoists = context.hoists，将context上下文中存的hoists属性数组赋值给根节点的hoists属性数组，后面在generate生成 render 函数时会用。

至此transform阶段已经完成了，主要做了两件事：

  • 将 h1 静态节点找出来，将该节点生成 render 函数的codegenNode属性 push 到根节点的hoists属性数组中，后面generate生成 render 函数时会用。
  • 将上一步 h1 静态节点的codegenNode属性替换为一个简单表达式，表达式为：_hoisted_1。

generate阶段

在generate阶段主要分为两部分：

  • 将原本 render 函数内调用createElementVNode生成 h1 标签虚拟 DOM 的代码，提到 render 函数外面去执行，赋值给全局变量_hoisted_1。
  • 在 render 函数内直接使用_hoisted_1变量即可。

如下图：

在这里插入图片描述

生成 render 函数外面的_hoisted_1变量

经过transform阶段的处理，根节点的hoists属性数组中存了所有需要静态提升的静态节点。我们先来看如何处理这些静态节点，生成 h1 标签对应的_hoisted_1变量的。代码如下：

genHoists(ast.hoists, context);

将根节点的hoists属性数组传入给genHoists函数，将断点走进genHoists函数，在我们这个场景中简化后的代码如下：

function genHoists(hoists, context) {
  const { push, newline } = context;
  newline();
  for (let i = 0; i < hoists.length; i++) {
    const exp = hoists[i];
    if (exp) {
      push(`const _hoisted_${i + 1} = ${``}`);
      genNode(exp, context);
      newline();
    }
  }
}

generate部分的代码会在后面文章中逐行分析，这篇文章就不细看到每个函数了。简单解释一下genHoists函数中使用到的那些方法的作用。

  • context.code属性：此时的 render 函数字符串，可以在 debug 终端看一下执行每个函数后 render 函数字符串是什么样的。
  • newline方法：向当前的 render 函数字符串中插入换行符。
  • push方法：向当前的 render 函数字符串中插入字符串 code。
  • genNode函数：在transform阶段给会每个 node 节点生成codegenNode属性，在genNode函数中会使用codegenNode属性生成对应 node 节点的 render 函数代码。

在刚刚进入genHoists函数，我们在 debug 终端使用context.code看看此时的 render 函数字符串是什么样的，如下图：
在这里插入图片描述

从上图中可以看到此时的 render 函数 code 字符串只有一行 import vue 的代码。

然后执行newline方法向 render 函数 code 字符串中插入一个换行符。

接着遍历在transform阶段收集的需要静态提升的节点集合，也就是hoists数组。在 debug 终端来看看这个hoists数组，如下图：

在这里插入图片描述

从上图中可以看到在hoists数组中只有一个 h1 标签需要静态提升。

在 for 循环中会先执行一句push方法，如下：

push(`const _hoisted_${i + 1} = ${``}`)

这行代码的意思是插入一个名为_hoisted_1的 const 变量，此时该变量的值还是空字符串。在 debug 终端使用context.code看看执行push方法后的 render 函数字符串是什么样的，如下图：

在这里插入图片描述

从上图中可以看到_hoisted_1全局变量的定义已经生成了，值还没生成。

接着就是执行genNode(exp, context)函数生成_hoisted_1全局变量的值，同理在 debug 终端看看执行genNode函数后的 render 函数字符串是什么样的，如下图：

在这里插入图片描述

从上面可以看到 render 函数外面已经定义了一个_hoisted_1变量，变量的值为调用createElementVNode生成 h1 标签虚拟 DOM。

生成 render 函数中 return 的内容

在generate中同样也是调用genNode函数生成 render 函数中 return 的内容，代码如下：

genNode(ast.codegenNode, context);

这里传入的参数ast.codegenNode是根节点的codegenNode属性，在genNode函数中会从根节点开始递归遍历整颗 AST 抽象语法树，为每个节点生成自己的createElementVNode函数，执行createElementVNode函数会生成这些节点的虚拟 DOM。

我们先来看看传入的第一个参数ast.codegenNode，也就是根节点的codegenNode属性。如下图：

在这里插入图片描述

从上图中可以看到静态节点 h1 标签已经变成了一个名为_hoisted_1的变量，而使用了msg变量的动态节点依然还是 p 标签。

我们再来看看执行这个genNode函数之前 render 函数字符串是什么样的，如下图：

在这里插入图片描述

从上图中可以看到此时的 render 函数字符串还没生成 return 中的内容。

执行genNode函数后，来看看此时的 render 函数字符串是什么样的，如下图：

在这里插入图片描述

从上图中可以看到，在生成的 render 函数中 h1 标签静态节点已经变成了_hoisted_1变量，_hoisted_1变量中存的是静态节点 h1 的虚拟 DOM，所以每次页面更新重新执行 render 函数时就不会每次都去生成一遍静态节点 h1 的虚拟 DOM。

总结

整个静态提升的流程图如下：

在这里插入图片描述

整个流程主要分为两个阶段：

  • 在transform阶段中：

    • 将 h1 静态节点找出来，将静态节点的codegenNode属性 push 到根节点的hoists属性数组中。
    • 将 h1 静态节点的codegenNode属性替换为一个简单表达式节点，表达式为：_hoisted_1。

  • 在generate阶段中：

    • 在 render 函数外面生成一个名为_hoisted_1的全局变量，这个变量中存的是 h1 标签的虚拟 DOM。
    • 在 render 函数内直接使用_hoisted_1变量就可以表示这个 h1 标签。

中可以看到，在生成的 render 函数中 h1 标签静态节点已经变成了_hoisted_1变量，_hoisted_1变量中存的是静态节点 h1 的虚拟 DOM，所以每次页面更新重新执行 render 函数时就不会每次都去生成一遍静态节点 h1 的虚拟 DOM。

诸葛亮的芭蕉扇
关注
【三十天精通Vue 3】第十六天 Vue 3 的虚拟 DOM 原理详解
陈书予
04-23 9797
在更新 DOM 的时候，如果新旧 VNode 的 key 值相同，则可以认为它们是同一个节点，此时可以直接复用旧节点的 DOM 元素，而不需要进行 DOM 的删除和创建操作，从而提高 DOM 更新的效率。在 Vue 3 中，组件是基本的构建块，因此使用虚拟 DOM 的优势在于组件的渲染和更新。在 Vue 3 中，动态组件是一种允许组件动态切换的技术。在更新 DOM 的过程中，Diff 算法的核心思想是找出新旧 VNode 树之间的差异，并只更新差异部分的 DOM，从而避免不必要的 DOM 操作，提高性能。
Vue中避免内存泄漏
superherooooss的博客
10-24 530
Vue 让开发响应式应用程序变得特别容易，但是仍然要警惕内存泄漏问题，这些内存泄露问题会发生在使用Vue之外的其他DOM操作的三方库时，请确保在不使用的情况下及时清理，保证用户的更好体验
vue3.0原理 —— complier
七月
06-13 573
vue3.0原理介绍新的编译器（compiler）, 及其带来的性能提升
Vue3.0 源码学习之静态提升
dongcehao的博客
09-16 1208
在 vue3.0 中，让人津津乐道的功能之一，就是静态提升功能了，这里就来简单学习一下这方面的源码 1、表现 测试地址 首先来一个表面结论：那就是 带有for、if 本身节点不会被静态提升 静态提升的不仅仅是节点，还有prop属性 2、源码分析 一切的入口 function hoistStatic(root, context) { walk(root.children, context, new Map(), // Root node is unfortu.
vue3编译优化之“静态提升”
qq_36348403的博客
05-14 878
本文讲了vue3是如何实现编译优化之“静态提升”，静态节点无需每次执行render函数都去生成一次虚拟DOM
VUE3-diff算法中的静态提升（Static Hoisting）
weixin_64974855的博客
06-29 523
VUE3-diff算法中的静态提升（Static Hoisting）
请简要介绍Vue3的静态提升是什么？它的作用是什么？
有我更精彩的博客
05-15 421
Vue.js是一款流行的前端框架，而Vue 3作为Vue.js的最新版本，带来了许多令人兴奋的新特性。其中，静态提升（Static Hoisting）是Vue 3相对于Vue 2的一个重要改进之一。在本篇博客中，我们将深入探讨Vue 3的静态提升是什么以及它的作用是什么。
vue3源码解析 vue3源码解析 vue3源码解析 vue3源码解析
07-02
Vue3 是一款流行的前端框架，其源码解析对于开发者深入理解框架的工作原理至关重要。本文将主要探讨Vue3的几个核心知识点：虚拟DOM（Virtual DOM）、diff算法、mustache模板引擎、数据响应式原理以及指令和生命周期...
vue核心原理解析
前端爆米花
07-11 8191
1. MVVM原理 vue的精髓在于组件化和数据驱动视图。 组件化之前就有，比如php等语言，vue使用了组件化思想。 进行了数据驱动视图的创新。之前的前端操作是静态渲染，要操作dom修改视图。 数据劫持的优势 无需显示调用，直接通知变化并驱动视图，react需要显示调用setState。 可精确得知变化数据，减少diff的额外开销。 data监听原理 Vue2核心api：Object.defineProperty 无法原生监听数组变化，vue对数组常用的8种方法进行hack，不过其他方法无法监
vue源码解析.zip
05-13
Vue.js 的源码解析可以帮助开发者深入理解其工作原理，提高开发效率，并能更好地进行性能优化和定制化开发。本资料"vue源码解析.zip"包含了一份名为"vue.pdf"的文档，预计会详细阐述Vue的核心概念、设计模式以及源码...
Vue3diff算法原理和优化
radcb55226的博客
04-20 977
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料，免费分享给大家，戳这里即可免费领取小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**
浅谈 Vue3 静态提升和预字符串化
赵花花的博客
03-05 1453
对vue3 静态提升和预字符串化的一些浅薄理解
vue3.0中diff的优化和静态提升
rayong的博客
03-11 652
最近因项目需求，开始补学vue3.0 ，总体感觉还不赖，组合API的强大，diff算法的更新，促使项目开发比以前快个一到两倍，体积也小了。 众所周知，2020年9月18日尤雨溪发布了正式版VUE3。为了更直接的观看代码的优化。大家可以去这个网站测试了解熟悉。 https://vue-next-template-explorer.netlify.app/ 例如：vue3.0中diff算法在创建虚拟DOM时候会根据内容可不可以变化来添加静态标记 还可以在右上角进行勾选，查看更多优化地方。这里是勾选了静态提升
vue3性能提升的方面（对比vue2）
暖光的博客
03-28 1031
patchFlag，静态提升，预字符串化，事件缓存，vue3性能提升
Vue3的template与Vue3编译时的静态提升
最新发布
m0_64062932的博客
06-25 908
在vue3中，template中的类似于html的语言最终会被编译为我们所熟知的虚拟dom，然后这个新的虚拟dom就会与旧的虚拟dom相比较，通过里面的算法，最终操作使用最小变化树的思想对真实dom进行操作。第一步，Vue3会对template里面的代码进行语法树的转换，会对里面的代码进行单词拆分，词法分析，最终会生成一颗原始的抽象语法树。这是第二步，里面的大致的过程就是将这颗原始的抽象语法树转换为一颗可以被处理的抽象语法树，并且会在里面做一些对抽象语法树的转化。
vue3.0性能优化点之静态标记(PatchFlag)
前端攻城狮
11-04 5043
vue3.0性能优化点之静态标记(PatchFlag)
Vue3的效率提升
不是程序猿呀的博客
06-20 251
Vue2与Vue3的区别 vue2中用new Vue()创建vue实例；vue3用createApp()实现； vue2中this是组件实例；vue3中this是组件代理对象； vue2中只能有一个根节点；vue3中可以有多个根节点； vue3中所有的data数据，method方法，及其他钩子函数都写在setup中； ......
静态树提升对Vue生态系统的影响和发展
青轩桃李能几何，流光欺人忽蹉跎
08-28 575
Vue 3是一款用于构建用户界面的JavaScript框架，它的设计目标是提供一种简洁、高效和灵活的开发体验。以下是Vue 3的基本概念和优势：响应式数据：Vue 3通过使用Proxy代理对象来实现响应式数据。当数据发生变化时，相关的视图会自动更新。这使得开发者可以方便地管理和处理复杂的数据状态。组合式API：Vue 3引入了组合式API，它使得组件的逻辑更加可组合和可复用。开发者可以根据需要将相关代码逻辑组合为函数，以提高代码的可读性和维护性。性能优化：Vue 3在性能方面进行了一系列的优化。
VUE3效率的提升
upup
06-16 192
静态提升 vue2中当我们写如下代码 <h1>hello</h1> 静态节点如下 render(){ createVNode("h1",null,"Hello World") } Vue3中认为静态节点就不会改变了，没有必要放在渲染函数中，因为渲染函数在更改时会反复运行。如下只创建一次，之后在render函数中重复使用就可以了 const hoisted = createVNode("h1",null,"Hello World") function render(){
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值