2021 年 11 月 左右，Strve 第一个版本发布，社区的反馈大部分是支持，也有少部分小伙伴提出了质疑，这都正常。你只要在社区发布一些作品，就必须接受其他人对你的作品的评价。

当初，开发 Strve 的初衷只是受到 JSX 语法的影响，觉得在 JavaScript 中编写 HTML 很酷，所以想能不能自己也开发一个前端框架。我最初给自己的目标就是能在 JavaScript 中写 HTML，然后通过编写 JavaScript 来改变页面状态。经过两个多周的调研，发现自己在原地打转。JSX 语法不能直接在浏览器运行，你必须通过类似 Babel 这种编译工具编译才能运行。所以，我就打算在模版字段串内编写 HTML。但是，又遇到了另一个问题，如何精确更新 DOM。当时，第一个想法就是利用虚拟 DOM，所以就抽时间来学习前端框架中都是怎么利用虚拟 DOM 来精确更新。不懂得就去网上查资料，然后就记下来。可能有些小伙伴就会问，是什么力量让你去做可能完成了也没什么意义的事情。怎么说呢！当时，我就是想要做出点东西来，觉得自己能做出来。至于做出来有什么意义，我没有多想。有时候我们做一件事情之前，考虑很多未必是好事，这往往会阻碍了我们做事情的脚步。

就这样，靠着自己的热情，第一个版本就这么问世了。

有很多小伙伴感觉 Strve 写法很像lit-html。说实话，开发 Strve 之前，我并不知道这个框架。后来看社区反馈，才到网上查看了有关的资料。虽然写法像，但并不是它的复制品。就比如 Strve 内部使用的是虚拟 DOM，这时的虚拟 DOM 还只是一个初版，只能说是简单的比对。

全新的认识

之前有看过我的文章的小伙伴，多多少少会知道 Strve。但是可能也只是停留在知道这个层面上，现在我通过几点来重新介绍下 Strve。

Strve 是一个易用、快速、灵活且轻量级的 JavaScript 库，用于构建用户界面。基于 tagged template 的 HTML 模板引擎，利用 ES6 的模板字符串来进行模板的书写，利用浏览器的原生的能力进行模板渲染。

• 更容易上手：只要你对 HTML、CSS 和 JavaScript 已经基本熟悉，就可以直接上手。
• 声明式渲染：我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系，开发者可以更加专注于业务逻辑的开发，不需要过多地关心 DOM 操作的细节。
• 顺滑的用户体验：模板字符串来进行模板的书写，在一些场景中代码智能提示、代码格式化方面不是特别友好。所以，我们提供了新的一种编码方式，我们可以使用 JSX 语法编写 Strve，提升用户开发体验。
• 性能出色：采用了虚拟 DOM 的模式，虚拟 DOM 使用 diff 算法的方法来计算出真正需要更新的节点，最大限度地减少了 DOM 操作以及 DOM 操作带来的排版与重绘损耗，从而显著提高了性能。另外，我们的 JavaScript 库在全球知名的测评榜单(js-framework-benchmark)上赢得了优秀的成绩。
• 组件化：一个函数就是一个组件，可以根据应用规模任意组合。并且组件特有的 “孤岛特性”，使得将虚拟 DOM 树计算的级别控制在组件级别。
• 灵活的应用场景：有无构建工具都可以使用，并且可以适配到其他前端框架开发的应用项目中去。
• 轻量级：压缩后的文件大小不足 10k。另外，可以根据不同应用场景，选择不同类型的文件。

想要了解更多关于 Strve 的特性，可以到官方中文文档中去探索。

https://strvejs.gitee.io/strve-doc-zh。

贴心的优化

2023 年我陆续发布了几个大的版本，大部分时间都是在优化底层代码。包括虚拟 DOM 的算法优化、减轻使用 API 时 心智负担等等优化措施。

下面我们来展开看下。

如果你不打算使用构建打包工具开发项目，而是直接开发。推荐使用全局构建版本，通过 CDN 使用 Strve 时，不涉及“构建步骤”，这使得设置更加简单。

<script src="https://cdn.jsdelivr.net/npm/strve-js@6.6.6/dist/strve.full.prod.js"></script>
<script>
  const { html, defineComponent } = Strve;

  defineComponent(
    {
      mount: '#app',
    },
    ({ setData }) => {
      let count = 0;

      function add() {
        setData(() => {
          count++;
        });
      }

      return () => html`<h1 onClick=${add}>${count}</h1>`;
    }
  );
</script>